DESIGN
CSSジェネレーター
複数のCSSプロパティをON/OFFして組み合わせ、リアルタイムプレビューとコードを生成。
使い方左のパネルでプロパティを ON にしてスライダーを動かすと、右のプレビューとコードがリアルタイムで更新されます。例: box-shadow の Y を 8px・ぼかしを 24px にするだけで、よくあるカード影が1クリックでコピーできます。
box-shadow（影）
0px
8px
24px
-4px
20%
background（背景）
135°
border-radius（角丸）
12px
12px
12px
12px
12px
border（枠線）
2px
transform（変形）
0°
1.00
1.00
0px
0px
0°
0°
filter（フィルター）
0px
100%
100%
0%
100%
opacity（不透明度）
100%
transition（トランジション）
300ms
0ms
プレビュー
生成コード
box-shadow: 0px 8px 24px -4px #1b1d2133; border-radius: 12px;