Developer Design Utility
CSS Gradient ジェネレーター
色、方向、タイプ、カラー停止位置を調整して、linear-gradient、radial-gradient、conic-gradient の CSS background コードを生成し、リアルタイムプレビューで確認できます。
Gradient 設定
グラデーションタイプ、色、角度、適用先セレクターを組み合わせて、目的に合う CSS 背景コードを作成できます。
Linear、Radial、Conic グラデーションを選択します。
Linear / Conic タイプの方向と回転基準として使用されます。
開始色です。HEX カラーコードを入力できます。
終了色です。コントラストが必要な UI では明度差を確認してください。
生成結果に使用する CSS セレクターを選択します。
カスタム選択時のみ使用します。
CSS変数コード生成時に使用する変数名です。
:root 変数とセレクター適用コードを一緒に出力します。
色と方向を調整してリアルタイム背景プレビューを確認してください。
おすすめプリセット
ボタン、カード、ヒーロー背景、サムネイルでよく使われるグラデーションです。
基本 UI グラデーション
強調 / CTA グラデーション
特殊タイプグラデーション
生成結果
以下のコードを CSS ファイルまたは style 属性で使用できます。
設定を選択して CSS コード生成ボタンを押してください。
ヘルプ
CSS Gradient ジェネレーターとは？
CSS Gradient ジェネレーターは、CSS グラデーション構文を手書きしなくても背景グラデーションコードを簡単に作成できるデザインユーティリティです。linear-gradient、radial-gradient、conic-gradient のコードをライブプレビューで確認しながら生成できます。
主な Gradient タイプ
- linear-gradient: 色が直線方向に変化するグラデーションです。ヒーローセクション、カード、ボタン背景によく使われます。
- radial-gradient: 中心または特定の焦点から円形に広がるグラデーションです。柔らかい背景効果や強調エリアに便利です。
- conic-gradient: 中心点を基準に色が回転するように配置されるグラデーションです。バッジ、チャート、装飾用の円形効果に活用できます。
おすすめの使用例
- ランディングページのヒーローセクション背景
- CTA ボタンと強調カード
- ブログのサムネイル、バナー、装飾用背景ブロック
- デザインシステムで再利用する CSS 変数カラー
生成された CSS の使い方
生成された CSS コードをコピーしてスタイルシートに貼り付ければ使用できます。CSS 変数オプションを使うと、:root にグラデーション値を保存し、複数のセレクターで var() として再利用できます。
デザインのヒント
- やわらかいグラデーションにしたい場合は、明度差が近い色を組み合わせるのがおすすめです。
- CTA ボタンや強調エリアには、コントラストの強い色の組み合わせが効果的です。
- グラデーション上にテキストを置く場合は、必ず可読性と色のコントラストを確認してください。
- 同じグラデーションを複数のコンポーネントで使う場合は、CSS 変数で管理すると便利です。
このツールを探すユーザーがよく行う作業
CSS Gradient Generator、linear-gradient generator、radial-gradient generator、conic-gradient generator、CSS background generator、gradient CSS maker を探すユーザーは、主にウェブサイト、ランディングページ、ボタン、カード、ブログサムネイルで使える再利用可能な背景コードを作成したいケースが多いです。
linear-gradient と radial-gradient の違いは何ですか？
linear-gradient は色が直線方向に変化し、radial-gradient は円形に広がる方式です。linear はセクションやボタン背景に多く使われ、radial はやわらかい強調効果に適しています。
グラデーションを文字に適用できますか？
可能です。background-clip: text と透明な文字色を一緒に使うと、テキストにグラデーションを適用できます。ただし、小さな画面では可読性を必ず確認することをおすすめします。
CSS 変数オプションはなぜ使いますか？
CSS 変数は同じグラデーションを複数のコンポーネントで再利用しやすくします。デザインシステムを管理したり、後から色を一括変更したい場合にも便利です。
グラデーションはアクセシビリティに影響しますか？
影響する場合があります。グラデーション背景の上にテキストやボタンを配置する場合は、グラデーション全体で十分な前景色コントラストが確保されているか確認する必要があります。