6XC

CSSグラデーション ジェネレーター

ライブプレビューを見ながら線形・放射状・円錐形のCSSグラデーションをデザインし、コードをコピーできます。

843回閲覧

CSSグラデーションとは

グラデーションは色と色の間を滑らかにつなぐ表現で、linear-gradient(角度, 色1, 色2)、radial-gradient(...)、conic-gradient(...)として記述します。種類・角度・最大3色を選ぶと、プレビューとコピー用のCSSが即座に更新されます。グラデーションはブラウザが描画するため画像のダウンロードが不要で、どんなサイズでもくっきり表示されます。

よくある質問

線形グラデーションの角度は何を意味しますか?

0°は上向き、90°は右向き、180°は下向きを表し、角度はグラデーションが進む方向を示します。135°にすると人気の左上から右下への斜めグラデーションになります。

radialとconicはどう使い分けますか?

radialは中心から外側へ色が広がり、スポットライトやビネット効果に向いています。conicは中心の周りを色相環のように回転し、円グラフや虹色のリングに適しています。

関連ツール

CSS Box Shadow(ボックスシャドウ)ジェネレーター オフセット・ぼかし・広がり・色・不透明度・内側影(inset)をビジュアルに調整し、ライブプレビューで影をデザインします。 使ってみる CSS Border Radiusジェネレーター 各角を個別に、または一括でpxか%で丸め、ライブプレビューとコピー可能なCSSを確認できます。 使ってみる CSSテキストシャドウ ジェネレーター オフセット・ぼかし・色・不透明度を調整してtext-shadowをデザインし、サンプルテキストでライブプレビューできます。 使ってみる CSS Border(枠線)ジェネレーター 太さ・スタイル(solid、dashed、dotted、double…)・色・角丸をビジュアルに調整し、ライブプレビューで枠線をデザインします。 使ってみる