Gradient CSS Generator

Create CSS gradients with a visual editor. Build linear, radial, and conic gradients with live preview.

Gradient CSS Generator tool

Loading...

Example

Input: Linear gradient, angle 90, stops #C4653A at 0% and #FAF7F2 at 100%

Result: background: linear-gradient(90deg, #C4653A 0%, #FAF7F2 100%);

An angle of 90deg runs the gradient from left to right, blending from the first color stop to the last across the element.

Linear Gradient Angles and Directions

AngleColor flowsKeyword
0degBottom to topto top
45degBottom left to top rightto top right (square boxes)
90degLeft to rightto right
135degTop left to bottom rightto bottom right (square boxes)
180degTop to bottomto bottom (default)
225degTop right to bottom leftto bottom left (square boxes)
270degRight to leftto left
315degBottom right to top leftto top left (square boxes)

Per the CSS Images spec. Corner keywords match the angle only when the box is square.

  1. Select the gradient type - linear, radial, or conic - from the Gradient Type menu, or click a preset to start from a ready-made gradient.
  2. Add color stops with the Add Stop button (up to 10), then set each stop's color and percentage position.
  3. For linear gradients, drag the Angle slider; for conic gradients, set the Start Angle. Radial gradients are drawn as a circle from the center.
  4. Preview the gradient updating in real time on the large preview area as you adjust colors, positions, and angles.
  5. Copy the generated CSS code from the output panel and paste it directly into your stylesheet.

How CSS Gradients Work

A CSS gradient is a background that blends two or more colors, drawn by the browser instead of loaded as an image. This generator builds linear, radial and conic gradients with a live preview. It then gives you a ready rule such as background: linear-gradient(90deg, #C4653A 0%, #FAF7F2 100%);

Every gradient is a list of color stops. A stop is a color plus a position from 0% to 100%. You can use 2 to 10 stops here, and the tool sorts them by position in the code it writes. Two stops at the same position make a hard edge instead of a blend, which is handy for stripes.

The three types differ in how the colors travel. A linear gradient runs in a straight line at the angle you set: 0deg points up, 90deg points right and 180deg points down. A radial gradient spreads out from the center in a circle. A conic gradient sweeps around the center like a clock hand, starting from the angle you choose.

Gradients add nothing to download and stay sharp at any size, so they suit hero sections, buttons and placeholders. Six presets give you a quick start. To choose stop colors that go well together, try the Color Palette Generator first.

Sources

Frequently Asked Questions

Angles run clockwise from the top. 0deg goes from bottom to top, 90deg from left to right, and 180deg from top to bottom, which is also the default. For a diagonal from the top left corner, 135deg is a common choice. On non-square boxes, a keyword like to bottom right aims at the exact corner, while 135deg keeps a fixed angle.
Give two neighboring stops the same position. For example, #C4653A 50% followed by #FAF7F2 50% switches color sharply at the middle. Repeat the pattern with more stops to make bands. This editor allows up to 10 stops, which is enough for a few stripes.
Yes. The background property accepts a comma-separated list, and the first item is drawn on top. Use colors with transparency in the upper layers so the ones below show through. Build each layer here, then join the gradient values with commas in your stylesheet.
Set the gradient as the background of the text element, then add background-clip: text and color: transparent. The gradient then shows only through the letter shapes. Some browsers still need the -webkit-background-clip version, so include both lines.
Yes. All current browsers support linear, radial and conic gradients without vendor prefixes. Conic gradients were the last to arrive, but they have worked in every major browser for several years.

Related Tools

Color Picker

Pick any color visually and get values in hex, RGB, HSL, and CMYK. Interactive saturation panel and hue slider.

Color Tools

Color Palette Generator

Generate harmonious color palettes. Create complementary, analogous, triadic, and split-complementary schemes.

Color Tools

Hex to RGB Converter

Convert hexadecimal color codes to RGB values instantly. Supports shorthand and 8-digit hex with alpha.

Color Tools

HSL to Hex Converter

Convert HSL color values to hexadecimal codes. Enter hue, saturation, and lightness for instant hex output.

Color Tools

Color Shade and Tint Generator

Generate shades and tints of any color. Create darker and lighter variations for complete color scales.

Color Tools

Random Color Generator

Generate random colors in HEX, RGB, and HSL formats. Create palettes and copy color codes instantly.

Randomizers and Generators