CSSジェネレーターとは
Webデザインでよく使うグラデーション・box-shadow（影）・glassmorphism（すりガラス）のCSSを、プレビューを見ながら作れる無料ツールです。スライダーや色を調整して、生成されたコードをそのままコピーして使えます。コーディングの下準備や、デザインの当たりをつけるのに便利です。
使い方
- 「グラデ」「box-shadow」「ガラス」から選ぶ
- 色やスライダーを調整してプレビューを確認する
- 生成されたCSSをコピーして貼り付ける
3つのジェネレーター
- グラデーション：線形・放射に加え、複数の放射グラデを重ねたメッシュ風も作れます。
- box-shadow：X/Y・ぼかし・広がり・色と濃さ・内側の影（inset）を調整。プリセットも用意。
- glassmorphism：
backdrop-filterを使ったすりガラス。色・透明度・ぼかし・枠線・角丸を調整。
使うときの注意
メッシュ風グラデは複数の radial-gradient を重ねているため、background-color と background-image の2行で出力されます。glassmorphism の backdrop-filter はブラウザ対応のため -webkit- 付きも併記しています。背景が透ける効果なので、下に色や画像がある要素の上で使うと映えます。
よくある質問
メッシュグラデの配置を変えたい
「配置を再生成」を押すと、放射グラデの位置がランダムに変わります。気に入った配置になるまで押してください。
影を複数重ねたい
生成された box-shadow はカンマ区切りで複数指定できます。プリセットの値を組み合わせて手で並べるとレイヤードな影になります。
ガラスが効きません
backdrop-filter は下に見える要素が必要です。透ける背景（色や画像）の上に重ねてご確認ください。一部の環境では未対応の場合があります。
無料・インストール不要のブラウザツール ／ CSSジェネレーター