ツール一覧 / CSSグラデーション生成

CSSグラデーション生成ツール

色と角度を選ぶだけで、linear-gradient / radial-gradientのCSSを作ります。 色は何色でも追加でき、位置も調整可能。プレビューを見ながら、コードをそのままコピーできます。

無料登録不要ブラウザ内で完結

設定

色(グラデーションの停止点)

プレビュー

CSS

デザインの土台ごと整えたい場合

AETHERは、色・余白・タイポグラフィがCSS変数で管理されたWordPressテーマ。1箇所変えれば全体に反映されます。

AETHERを見る

ほかの道具も見る

72本すべてを見る →

linear と radial の違い

linear(直線)は、指定した角度に沿って色が変わります。背景やボタンでよく使われます。 radial(円形)は、中心から外へ向かって色が広がります。スポットライトのような表現に向きます。

角度の考え方

linear-gradientの角度は、0deg が下から上、90deg が左から右、 180deg が上から下です。時計回りに増えていくと覚えると分かりやすいです。 斜めにしたいときは 45deg あたりから試してください。

色は2色より少し多めが自然なことも

2色だけだと単調に見えるときは、間に近い色を1つ足すと、より滑らかで深みのある印象になります。 逆に、くっきり分けたい(ストライプ状にしたい)ときは、2つの色停止点の位置を同じ数値にします。

このツールについて

入力内容はブラウザの中だけで処理され、サーバーに送信されることはありません。