Stax
Tools

CSS Gradient Generator

Build linear and radial CSS gradients visually and copy ready-to-use CSS.

0°90°180°270°360°
#6366f1
0%
#ec4899
100%
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

CSSグラデーション — 画像不要

グラデーション角度リファレンス

美しいグラデーションのヒント

CSSグラデーションが登場する前、開発者はカラートランジションを作成するために背景画像（しばしば1px幅のGIF）を使用していました。今日では、CSSのlinear-gradient()とradial-gradient()関数が、あらゆる画面密度で完璧にスケールするスムーズで解像度に依存しないグラデーションを生成します。

グラデーションは画像より高速（ネットワークリクエストなし）で、完全にレスポンシブで、CSSトランジションでアニメーションさせることができます。

Webデザイナーは重い画像を読み込まずにヒーローセクションの背景を作成するために線形グラデーションを使用します — 135°の2ストップグラデーションは即座にレンダリングされ、あらゆる画面密度でシャープに見えます。UI開発者は深度を出すためにボタンのホバー状態やカード背景に放射グラデーションを適用します。ランディングページ制作者はストック写真なしで視覚的な興味を加えるために、全ページ背景として複数ストップのグラデーションを使用します。CSSグラデーションはプログレスバー、ローディングスケルトン、ページセクション間の装飾的な区切り線にも使用されます。

  • 0° — 下から上
  • 45° — 左下から右上
  • 90° — 左から右
  • 135° — 左上から右下
  • 180° — 上から下
  • 隣接する色相を使う — 類似色（例：紫からピンク）間のグラデーションは補色間よりも自然に見える。
  • 中間点が濁るのを避ける — 2色の中間でグレーや茶色が生まれる場合は、一方の色のより明るいバージョンで中間ストップを追加する。
  • 背景には微妙なグラデーション — UIの背景には、色の差を小さく保つ（例：2つの似た青）ことで洗練された見た目になる。

よくある質問

What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colors defined entirely in CSS — no image file needed. Gradients are defined using the linear-gradient() or radial-gradient() CSS functions and can be used anywhere a background image is accepted.
What is the difference between linear and radial gradients?
A linear gradient transitions colors along a straight line at a given angle (0° = bottom to top, 90° = left to right, 135° = diagonal). A radial gradient radiates outward from a center point in a circular or elliptical shape.
How do I use the generated CSS?
Copy the generated CSS and paste it into your stylesheet. For example: .hero { background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%); }. It works in all modern browsers without any prefix.
Can I add more than two color stops?
Yes. Click 'Add Stop' to insert additional color stops anywhere along the gradient. Each stop has a color and a position (0–100%). You can create complex multi-color gradients with as many stops as needed.
Do CSS gradients work everywhere?
Yes. linear-gradient() and radial-gradient() are supported in all modern browsers (Chrome, Firefox, Safari, Edge) without any vendor prefix. Browser support is effectively 100% for current users.

関連ツール