CSS ジェネレーターとは?
グラデーション・影・角丸は、数値を打って一発で決めるのが難しく、調整しては見て、また調整…の繰り返しになりがちです。この CSS ジェネレーターはそれらをスライダーとカラーピッカーにし、リアルタイムプレビューで納得いくまで動かして、きれいな CSS をコピーできます。3つのツールを収録:グラデーション(linear / radial)、box-shadow、border-radius。すべてブラウザ内で処理します。
使い方
- 上部のタブを切り替えます:グラデーション、box-shadow、角丸。
- スライダーを動かし色を選ぶと、プレビューが即更新されます。
- 「CSS をコピー」で生成コードをスタイルシートに貼り付けます。
活用シーン
- ボタンやカードのグラデーション背景・影をすばやく作成。
- 数値を当てずっぽうにせず、ちょうどよい角丸を決める。
- 「数値 ↔ 見た目」を見ながら CSS を学ぶ。色コード変換は カラー変換 をどうぞ。
作った影が「作り物っぽい」のはなぜ?
よくある原因は真っ黒+大きなオフセット+ぼかしゼロで、要素の後ろに黒い板を貼ったように見えます。本物の影は柔らかく半透明で、オフセットもわずかです:小さいオフセット(2〜6px)・中程度のぼかし(10〜20px)・低い不透明度の暗い色(例:rgba(0,0,0,0.15))を試すと、ぐっと自然になります。忘れがちな点:box-shadow はレイアウトの領域を取りません——border と違って隣の要素を押しやらないので、影を足しても配置は変わりません。「グロー」効果なら、明るい色にしてオフセットを0、ぼかしを大きくします。3つの効果ができたら、HEX/RGB/HSL の色コード変換は カラー変換 をどうぞ。