CSSグラデーションジェネレーター

線形および放射状のCSSグラデーションを作成します。視覚的に色を選び、生成されたCSSをコピーできます。

色 1

色 2

角度: 135°

background: linear-gradient(135deg, #535beb, #7c3aed);

このツールの使い方

1
Click the Color 1 swatch and choose your starting color from the native color picker.
2
Click the Color 2 swatch and choose the color the gradient fades into.
3
Drag the Angle slider from 0 to 360 degrees to set the gradient direction; the live preview updates instantly.
4
Copy the generated background: linear-gradient(...) line from the code box into your stylesheet.

CSSグラデーションは、2色以上の間の色の遷移です。線形グラデーションは一方向に流れ、放射状グラデーションは一点から放射状に広がります。このジェネレーターは一般的なケースをカバーします。位置を細かく指定する複雑な複数ストップのグラデーションについては、手動で作成してください。

Creating a hero section or landing page banner background that fades between two brand colors.
Generating button and card backgrounds with a subtle two-tone diagonal fade.
Producing a gradient overlay placed above a photo to improve text contrast.
Prototyping color direction quickly by dragging the angle slider before committing to final values.
Grabbing a ready-to-paste linear-gradient string for a Tailwind, styled-components, or plain CSS file.
Teaching or demonstrating how gradient angle changes the visual direction of a fade.

グラデーションは効率的ですか？▼

はい。グラデーション画像よりもはるかに低コストです。品質を損なうことなく任意のサイズに拡大縮小できます。

グラデーションをアニメーションさせることはできますか？▼

グラデーションを直接アニメーションさせることはサポートされていません。JavaScriptを使ってグラデーションのプロパティをアニメーションさせるか、background-positionを使ったテクニックを利用してください。