跳至主要內容
Lizely

CSS 藍色浮水印生成器

創造一個平衡的柔和介面表面，具有驗證過的色彩對比、配對陰影、模糊、距離與圓角，然後複製精確的 CSS。

隱私權：你的檔案不會離開裝置，所有處理均在瀏覽器本機完成。

使用方式

  1. 1.選擇元件及其周圍區域共用的表面色彩。
  2. 2.調整配對陰影的距離、模糊與對比。
  3. 3.設定圓角，並檢視抬升的預覽效果。
  4. 4.複製 CSS，接著加入語意狀態、焦點提示與可訪問性檢查。

關於CSS 藍色浮水印生成器

CSS 藍色浮水印生成器會建立常見用於柔和凸起介面的配對陰影。選擇一個六位數的基礎色彩、陰影距離、模糊半徑、對比百分比與圓角半徑。該工具透過將基礎色彩的字元分別向黑與白混合相同百分比，產生較深的陰影與較亮的高光，並將這些色彩置於相等的正負偏移上。預覽會使用複製的 CSS 中返回的精確背景、半徑與 box-shadow 值，因此視覺輸出與程式碼共享同一計算。

此效果取決於元素與其周圍表面之間的密切關係。一個浮水印卡片通常會使用與父元素相同的基礎色彩，讓兩種陰影暗示深度，且無明顯邊框。若父元素背景不同，該元素可能看起來像一個無關的灰框。請將產生的背景複製至目標表面，或改用已存在且對應相同色彩的設計標記。此產生器僅提供凸起狀態；凹陷控制、按下狀態、焦點環與禁用狀態需另外設定。

陰影距離設定水平與垂直的偏移。深色陰影向右下方移動，而亮色高光則向左上方移動。模糊會軟化兩邊的邊緣。對比控制的是每個匯出陰影顏色與基礎顏色之間的距離，而非不透明度。字元計算會四捨五入至有效的八位十六進位值。較高的百分比會產生更明顯的分離，但可能迅速失去細膩感。設定範圍會防止負長度、非有限數值、不完整的顏色與極端設定進入宣告。空的數值輸入視為錯誤，而非靜默的零。

浮水印有重要的可及性限制。低對比是視覺風格的一部分，但控制元件仍需有明確的邊界、可讀的標籤、可見的鍵盤焦點，以及無法僅透過陰影方向傳達的狀態。視障使用者可能難以分辨凸起按鈕與按入凹陷按鈕。請針對實際的基礎色彩測試文字與圖示，加入明確的焦點邊框，並考慮加入邊框或更強的狀態提示。強制色彩與高對比模式可能捨棄裝飾性陰影，因此底層語義元素與狀態必須保持可理解。

多個大面積模糊陰影會增加繪製成本，特別是在滾動清單或動態表面中。建議僅在少量穩定元素上使用此效果，避免持續動態模糊，並測試代表性行動裝置。產生的規則不會加入過渡、懸停移動、字型、內邊距或佈局，因為這些屬於宿主元件系統的範疇。若元件改變高度，建議使用短暫的轉換或標記化的陰影過渡，並尊重減少動畫偏好設定。不要讓裝飾性深度造成佈局移動或隱藏載入與錯誤狀態。

所有處理皆在當前瀏覽器標籤頁內完成。不會上傳或儲存任何內容，無需帳號，也無需安裝套件。該生成器會驗證 CSS 指向的範圍並產生確定性顏色，但無法保證對比、視覺層次、瀏覽器渲染或實際產品中的表現。請將此規則複製到測試元件中，匹配父元素表面，加入語義性的 HTML 與焦點行為，檢視明暗主題、縮放、強制色彩與行動裝置效能，然後調整設計標記，而非散佈單次值。

方法與來源

驗證六位數的基底顏色與有限的幾何範圍，並依據所選對比值對 RGB 的各通道對稱混合向黑與白，並將配對的正負盒陰影以不變形式套用於預覽中。

常見問題

為何表面看起來像一個獨立的方塊？
陰影設計通常仰賴元件與父層共用相同的基底顏色，若父層不同，就會破壞柔和表面的視覺效果。
這會產生按壓或內縮狀態嗎？
不會。它僅產生一個抬升狀態。請分別建立按壓、焦點、停用與錯誤狀態，並確保這些狀態之間有明確差異，避免使用陰影。
陰影設計預設是否具備可訪問性？
不會。低對比可能掩蓋邊界與狀態，應加入強烈的焦點提示、可讀對比、語意控制項，以及高對比的備用方案。

相關工具

開發者工具 使用指南

查看全部