グラデーション作成

美しい色の移り変わり

2色以上の色を組み合わせて美しいグラデーションを作成できます。プリセットからの選択やカスタマイズが可能で、CSSコードを即座にコピーできます。

タイプ

方向

background: linear-gradient(to right, #6366f1 0%, #ec4899 100%);

グラデーションのコツ

色が多すぎると乱雑に見えることがあります。シンプルさを意識して、2〜3色に抑えましょう。

色相環で近い色同士は自然なグラデーションになります。青→緑、オレンジ→赤など。

ボタンは左→右、背景は上→下など、用途に合わせた方向を選びましょう。