Preview
生成された CSS
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
グラデーションコントロール
135°
0%
100%
人気のプリセット
グラデーションの例
これらの見事なグラデーションの例を探索して、次のプロジェクトのためのインスピレーションを得てください。任意のグラデーションをクリックして、ジェネレーターにロードします。
サンセットブラッシュ
美しい夕日をイメージした温かみのあるグラデーション。
オーシャンブリーズ
海岸の水辺を感じさせる落ち着いた勾配。
ミントフュージョン
ミントとスカイブルーを組み合わせたフレッシュでモダンなグラデーション。
緑豊かな庭園
自然の美しさを表現した鮮やかなグラデーション。
コズミックドリーム
夜空をイメージした幻想的なグラデーション。
ゴールデンアワー
トワイライトのエッセンスを捉えた温かみのあるグラデーション。
グラデーションのドキュメント
CSSグラデーションとは何ですか?
CSS グラデーションを使用すると、2 つ以上の色間のスムーズなトランジションを表示できます。これらは要素の背景として使用でき、次の 3 つのタイプがあります。
- 線形グラデーション:直線に沿って色を遷移します。
- 放射状グラデーション:中心点から外側に向かって色を遷移します。
- 円錐曲線:円の中心点を中心とする色を遷移します。
グラデーションの使い方
ツールを使用してグラデーションを生成したら、プロジェクトでCSSコードを使用できます。
- ジェネレータから CSS コードをコピーします。
- CSSファイルに貼り付けるか、HTML要素でインラインで使用します。
- を使用して任意の要素にグラデーションを適用します。
backgroundproperty.
.my-element {
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
- 2 つ以上の色を使用すると、より複雑なグラデーション効果が得られます。
- 色の位置を調整して、トランジションが発生する場所を制御します。
- 複数のグラデーションを組み合わせて、さらにクリエイティブな効果を実現します。
- 円錐曲線の場合、中心を変更すると興味深いパターンが作成されます。
- お気に入りのグラデーションを後で使用するために保存してください。
ブラウザのサポート
CSS グラデーションは、最新のブラウザーで広くサポートされています。ただし、Internet Explorerなどの古いブラウザでは正しくレンダリングされない場合があります。常にフォールバックカラーを指定します。
.my-element {
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
Chrome
26+
Firefox
16+
Safari
6.1+
Edge
12+