CSSジェネレーター
グラデーション・ボックスシャドウ・角丸のCSSを視覚的に生成(ブラウザ内処理)
設定
カラーストップ
プレビュー
生成されたCSS
完全ローカル処理
CSSの生成・プレビューはすべてブラウザ内で実行されます。入力した値がサーバーに送信されることはありません。
使い方
- 上部のタブで生成したいCSS(グラデーション / ボックスシャドウ / 角丸)を選びます。
- スライダーやカラーピッカーを操作すると、右側のプレビューがリアルタイムに更新されます。
- 生成されたCSSコードを確認し、「コピー」ボタンでクリップボードに取得します。
- 取得したコードを、お使いのスタイルシートに貼り付けてご利用ください。
対応プロパティ
グラデーション
linear-gradient / radial-gradient。角度指定・複数カラーストップに対応。
ボックスシャドウ
X/Y・ぼかし・広がり・色・不透明度・insetを設定。複数レイヤーの重ねがけも可能。
角丸 (border-radius)
四隅を個別に、または「全て連動」で一括調整。最短記法で出力します。
ライブプレビュー
操作に合わせて結果を即座に反映。仕上がりを見ながら調整できます。
ワンクリックコピー
生成されたCSSをそのままコピー。プロパティ名付きで貼り付けられます。
完全ローカル処理
すべてブラウザ内で完結。データの外部送信は一切ありません。