DiffCheck

CSSグラデーション生成

ビジュアルエディタでCSSのlinear・radial・conicグラデーションを作成し、CSSコードをワンクリックでコピーできます。

135°
#3b82f60%
#8b5cf6100%

background:

linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);

ベンダープレフィックス付き：

background: -webkit-linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
background: -moz-linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);

What Is the CSS Gradient Generator?

The CSS gradient generator is a free visual tool for creating linear, radial, and conic CSS gradients without writing any code by hand. Pick your colors, drag the position sliders, adjust the direction or angle, and the tool generates ready-to-paste CSS that works in all modern browsers.

Gradients are one of the most powerful CSS features for building attractive UIs — backgrounds, buttons, cards, text effects, and borders can all use gradients. This generator removes the trial-and-error from writing gradient syntax manually.

How to Use the CSS Gradient Generator

  1. Choose a gradient type: Linear, Radial, or Conic.
  2. For linear and conic gradients, set the angle using the slider or preset buttons.
  3. For radial gradients, choose the shape (circle or ellipse) and center position.
  4. Edit color stops: click the color swatch to open the color picker, drag the slider to set the position.
  5. Click + Add Stop to add more colors, or × to remove one.
  6. The live preview updates in real time. Click Copy to copy the CSS.
  7. Use presets as a starting point and customize from there.

Features

  • Three gradient types: linear, radial, and conic
  • Live full-width preview updates instantly
  • Add unlimited color stops with individual color pickers and position sliders
  • Angle presets (0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°)
  • Radial gradient shape (circle / ellipse) and center position control
  • Outputs standard CSS and vendor-prefixed versions
  • 6 built-in presets to jump-start your design
  • Copy CSS to clipboard in one click

FAQ

What is a CSS gradient?

A CSS gradient is a smooth transition between two or more colors rendered entirely by the browser — no image file is needed. CSS supports three gradient functions: linear-gradient() for directional fades, radial-gradient() for circular or elliptical transitions from a center point, and conic-gradient() for color transitions that sweep around a point like a color wheel.

What is the difference between linear, radial, and conic gradients?

A linear gradient transitions colors in a straight line at a given angle. A radial gradient radiates outward from a center point in a circle or ellipse. A conic gradient sweeps colors around a center point, similar to a pie chart or color wheel.

Do I need vendor prefixes for CSS gradients?

Modern browsers support the standard gradient syntax without prefixes. However, for maximum compatibility with older browsers, the tool also provides the -webkit- and -moz- prefixed versions in the output.

How do I add more color stops?

Click the "+ Add Stop" button to add a new color stop. Each stop has a color picker and a position slider (0–100%). You can add as many stops as you need. Remove a stop by clicking the × button next to it (minimum 2 stops required).