CSSジェネレーター

グラデーション・ボックスシャドウ・背景パターン・角丸とボーダーを、プレビューを見ながら作って CSS をコピーできます。

✨ できること

  • linear / radial / conic のグラデーションを、角度とカラーストップ(追加・削除・位置指定)で自由に作成
  • ボックスシャドウはレイヤーを重ねられ、inset(内側)や不透明度もその場で調整
  • ストライプ・ドット・チェックの背景パターンを、画像を使わない CSS だけで生成
  • 4隅個別の border-radius とボーダー。どのタブも大きなプレビューつきで、CSS をそのままコピーできる

🪄 こんなときに

ヒーロー画像の代わりに

画像を用意せず、グラデーションだけで見出し背景を作る。読み込みも軽い。

カードの影を決める

ぼかしと広がりを少しずつ変えて、浮きすぎない影を探す。

背景の地紋づくり

ストライプやドットを CSS だけで敷き、画像リクエストを増やさない。

デザインの共有

URL を送れば相手の画面で同じ設定が開き、そのまま調整してもらえる。

🔒 プライバシー

CSS の生成とプレビューはすべてブラウザ内で行われ、サーバーには送信されません。URL共有の短縮を使うときだけ、共有URL(設定内容を含む)が短縮サービスに送られます。

❓ よくある質問

生成した CSS はそのまま使えますか?

はい。background や box-shadow などのプロパティをそのままコピーして、対象の要素に貼り付けてください。ベンダープレフィックスは付けていません。linear-gradient・radial-gradient・box-shadow は主要ブラウザで長く安定して使えます。conic-gradient は比較的新しい機能です。

カラーストップの位置は省略できますか?

CSS では省略でき、その場合は等間隔に配置されます。このツールでは意図した位置を明示するため常に % を出力します。不要なら貼り付けたあとに数値だけ消してください。

ボックスシャドウのレイヤーはいくつまで重ねられますか?

CSS 側の上限はなく、カンマ区切りで好きなだけ並べられます。このツールでは扱いやすさを優先して 5 レイヤーまでにしています。自然な影は「小さくて濃い影」と「大きくて薄い影」を 2〜3 枚重ねると作りやすいです。

パターンは画像を使っていませんか?

使っていません。ストライプは repeating-linear-gradient、ドットは radial-gradient と background-size、チェック柄は conic-gradient で作っています。画像リクエストが増えず、拡大しても粗くならず、色の変更もコード上で完結します。

🔗 関連ツール

グラデーション

種類
deg

カラーストップ

プリセット

プレビュー

生成された CSS