CSSジェネレーター(box-shadow / border-radius / gradient)

プレビュー

CSSジェネレーターとは?

CSSジェネレーターは、box-shadow・border-radius・gradient・text-shadowの4つのCSSプロパティを、スライダーを動かすだけで視覚的に生成できるツールです。リアルタイムでプレビューを確認しながらCSSコードを取得できます。

対応プロパティ

プロパティ説明
box-shadow要素に影をつける。X/Yオフセット・ぼかし・広がり・色・insetを調整
border-radius角丸を設定。全体一括 or 四隅個別に指定可能
gradientグラデーション背景を生成。linear/radial切替・方向・色を指定
text-shadowテキストに影をつける。X/Yオフセット・ぼかし・色を調整

よくある質問

box-shadow、border-radius、gradient、text-shadowはすべてのモダンブラウザ(Chrome、Firefox、Safari、Edge)で対応しています。ベンダープレフィックスは不要です。
いいえ、すべての処理はブラウザ上で完結します。