CSS ジェネレーター

box-shadow・clip-path・cubic-bezier・グラスモーフィズムをプレビューしながら作成

ボックスの色

背景

角丸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 ジェネレーターの使い方

ボックスシャドウ、クリップパス、3 次ベジェ、グラスモーフィズム、ブロブ角丸、テキストシャドウをプレビューを見ながら作成し、CSS と Tailwind の任意値クラスで出力します。

ジェネレーターを「ボックスシャドウ」「クリップパス」「3 次ベジェ」「グラスモーフィズム」「ブロブ角丸」「テキストシャドウ」から選びます。

プリセットから始めるか、スライダーや色を調整します。

クリップパスの点、ベジェの 2 つのハンドル、ブロブのハンドルは、プレビュー上で直接ドラッグできます。

下に表示される CSS または Tailwind のクラスをコピーします。

よくある質問

できます。「ボックスシャドウ」で「レイヤーを追加」を押すと、レイヤーごとにオフセット、ぼかし、広がり、色、不透明度、内側を設定できます。

図形の辺をダブルクリックすると点が追加され、点を選んで Delete キーを押すと削除できます。「円」「楕円」「インセット」はスライダーで調整します。

backdrop-filter は要素の背後にあるものをぼかすため、色や模様のある背景が必要です。出力には Safari 用の -webkit- 接頭辞も含まれています。

Y の値が 1 を超えたり 0 を下回ったりすると、動きが行き過ぎて跳ね返りや予備動作のような効果になります。「再生」を押すと直線的な動きと比較できます。