CSS 產生器

陰影、clip-path、貝茲緩動與毛玻璃效果，即時預覽

方塊顏色

背景

圓角16px

CSS

box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);

Tailwind（任意值）

shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]

如何使用CSS 產生器

以視覺化方式產生 CSS 並即時預覽：盒陰影、裁切路徑、貝茲緩動曲線、毛玻璃、不規則圓角與文字陰影。每一種都同時提供一般 CSS 與 Tailwind 任意值寫法，直接複製即可。

選擇產生器：「盒陰影」「裁切路徑」「貝茲曲線」「毛玻璃」「不規則圓角」或「文字陰影」。

從預設開始，或拖曳滑桿、調整顏色。

部分產生器可直接在預覽上拖曳：裁切路徑的控制點、貝茲曲線的兩個控制桿、不規則圓角的控制點。

從下方複製 CSS 或 Tailwind 類別名稱。

常見問題

可以。在「盒陰影」點「新增圖層」，每一層都能個別設定位移、模糊、擴散、顏色、不透明度與內陰影。

雙擊形狀邊緣新增點，選取點後按 Delete 刪除。「圓形」「橢圓」「內縮矩形」則改用滑桿調整。

backdrop-filter 只會模糊元素後方的內容，背景要有顏色或圖案才看得出來。輸出已包含給 Safari 使用的 -webkit- 前綴。

Y 值大於 1 或小於 0 會讓動畫衝過頭，產生回彈或預備動作的效果。點「播放」可以和線性動畫對照。

不需要。使用的是 Tailwind 內建的任意值語法，例如 rounded-[…] 或 [clip-path:…]。