CSSジェネレーター（グラデーション・ボックスシャドウ・角丸）
グラデーション、ボックスシャドウ、角丸を見ながらデザインし、必要なCSSをそのままコピーできます。
CSSジェネレーター — グラデーション・ボックスシャドウ・角丸
CSSでよく使う3つの効果、グラデーション、ボックスシャドウ、角丸（border-radius）を、試行錯誤ではなく目で見ながらデザインできます。スライダーを動かしたり色を選んだりすると、プレビューのボックスがすぐに変わります。その下のCSSは常にプレビューとまったく同じ内容で、そのままスタイルシートに貼り付けられます。
出力は標準プロパティの background、box-shadow、border-radius で、現在のすべてのブラウザーがベンダープレフィックスなしで対応しています。データはどこにも送信されません。ツールはブラウザー内で動作します。
使い方
- グラデーション、ボックスシャドウ、角丸のいずれかを選びます。
- スライダーを動かすか、横の入力欄に正確な数値を入力するか、色を選びます。
- ランダムで出発点を作るか、リセットで初期値に戻します。
- プレビューの下のCSSをコピーします。
グラデーション
グラデーションはブラウザーが描く画像なので、background（または background-image）に指定し、どんなサイズに拡大してもぼやけません。使える種類は3つです。
| 種類 | 例 | 見た目 |
|---|---|---|
| 線形 | linear-gradient(135deg, #6c5ce7 0%, #00b894 100%) | 設定した角度の直線に沿って色が変わる |
| 円形 | radial-gradient(circle, #6c5ce7 0%, #00b894 100%) | 中心から輪のように色が広がる |
| 扇形 | conic-gradient(from 135deg, #6c5ce7 0%, #00b894 100%) | カラーホイールのように中心の周りを色が回る |
それぞれの色にはパーセントで位置があります。2つの色を同じ位置に置くと、なめらかに混ざらずにくっきりした境目になります。純粋なCSSでストライプや円グラフを作るときはこの方法を使います。色を追加で最大6色まで均等に並べて追加でき、色を削除で最後の色を取り除けます（最低2色）。
CSSの角度は上から始まり、時計回りに進みます。0deg は上向き、90deg は右向き、180deg は下向きです。
ボックスシャドウ
ボックスシャドウには最大5つの値、水平方向のずれ、垂直方向のずれ、ぼかし、広がり、色を指定でき、さらにキーワード inset を付けられます。
- 水平方向と垂直方向で影を動かします。マイナスの値なら左や上に動きます。
- ぼかしは輪郭をやわらげます。0なら切り抜いたようなくっきりした影になります。
- 広がりはぼかす前に影を大きくします。マイナスの広がりと大きなぼかしを組み合わせると、最近のUIでよく見る、ふんわり浮いたような影になります。
- 不透明度は
rgba()として色に組み込まれるため、影が背後のものを隠すことはありません。 - 内側の影（inset）は影をボックスの内側に描き、へこんだように見せます。
影は強いものより控えめなもののほうがたいてい見栄えがします。真っ黒ではなく、配色から取った暗めで少し透明な色を使うと、より自然になじみます。
角丸
すべての角を同じ値にするにチェックを入れると、1つのスライダーで4つの角すべてが丸くなります。チェックを外すと角ごとに設定でき、CSSには左上、右上、右下、左下の順に4つの値が並びます。
ピクセルなら、どのサイズでも丸みは変わりません。パーセントならボックスに合わせて変わり、border-radius: 50% で正方形は円に、長方形は楕円になります。
関連ツール
色をHEX、RGB、HSLの間で変換したり、背景と十分なコントラストがある色を探したりするには、カラー変換ツールを使ってください。CSSを貼り付けたスタイルシートを整えたり圧縮したりするには、コード整形ツールが便利です。1つの効果に絞ってこのツールを開くタスクページもあります：CSSグラデーションジェネレーター、ボックスシャドウジェネレーター、角丸（border-radius）ジェネレーター。