CSS グラデーション

視覚的なエディターで直感的にCSSグラデーションを生成します。

色を追加
グラデーションの方向
CSS:
Advertisement

美しいCSSグラデーションの色と角度を直感的なスライダーで微調整し、グラデーション用のCSSコードを即座に取得できます。

使い方

  1. 方向を選ぶか、円形グラデーションに切り替えます。
  2. 色を設定し、必要なら色の停止点を追加します。
  3. 生成された CSS をスタイルシートにそのまま貼り付けます。

よくある質問

どんな CSS が出力されますか

標準の linear-gradient() と radial-gradient() の値です。現行のブラウザはすべてベンダー接頭辞なしで対応しています。

色はいくつまで使えますか

いくつでも使えますが、たいていは 2 色か 3 色が最もきれいです。停止点を増やしすぎると、交わる部分が濁ります。

中央が灰色になるのはなぜですか

正反対の色相が、彩度の低い点を通って出会うためです。色相環で近い色を選ぶか、間に停止点を足して移り変わりを導いてください。

おすすめのツール