CSSジェネレーター

グラデーション・ボックスシャドウ・角丸のCSSを視覚的に生成(ブラウザ内処理)

設定

カラーストップ

プレビュー

生成されたCSS

完全ローカル処理

CSSの生成・プレビューはすべてブラウザ内で実行されます。入力した値がサーバーに送信されることはありません。

使い方

  1. 上部のタブで生成したいCSS(グラデーション / ボックスシャドウ / 角丸)を選びます。
  2. スライダーやカラーピッカーを操作すると、右側のプレビューがリアルタイムに更新されます。
  3. 生成されたCSSコードを確認し、「コピー」ボタンでクリップボードに取得します。
  4. 取得したコードを、お使いのスタイルシートに貼り付けてご利用ください。

対応プロパティ

グラデーション

linear-gradient / radial-gradient。角度指定・複数カラーストップに対応。

ボックスシャドウ

X/Y・ぼかし・広がり・色・不透明度・insetを設定。複数レイヤーの重ねがけも可能。

角丸 (border-radius)

四隅を個別に、または「全て連動」で一括調整。最短記法で出力します。

ライブプレビュー

操作に合わせて結果を即座に反映。仕上がりを見ながら調整できます。

ワンクリックコピー

生成されたCSSをそのままコピー。プロパティ名付きで貼り付けられます。

完全ローカル処理

すべてブラウザ内で完結。データの外部送信は一切ありません。