CSS Gradient Generator

A CSS gradient generator with draggable color stops

This CSS gradient generator lets you design linear-gradient(), radial-gradient() and conic-gradient() backgrounds visually. You place color stops on a bar, watch the result on a large preview drawn over a checkerboard (so transparent areas are obvious), and get a rule you can paste straight into a stylesheet.

There is no fixed limit on the number of stops. Each stop has its own color, position and opacity, so the same editor handles soft two-color fades, fades to transparent, hard-edged stripes and multi-color backgrounds.

Example output

The default Ocean preset produces this rule:

.gradient {
  background: #0ea5e9;
  background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
}

The first background line is a solid fallback using the first stop's color. A browser that cannot parse the gradient keeps that color; every other browser overrides it with the second line. The Tailwind tab turns the same value into an arbitrary-value class, with spaces replaced by underscores:

bg-[linear-gradient(135deg,#0ea5e9_0%,#6366f1_100%)]

For linear gradients an SVG tab appears as well. It holds an 800×400 SVG with a <linearGradient> that follows your angle and stops, which is useful in design tools or anywhere a CSS background is not an option.

Options explained

Linear, radial and conic

• Linear blends colors along a straight line. The Angle follows CSS conventions: 0deg points up, 90deg to the right and 180deg down.
• Radial spreads outward from a center point as an Ellipse (which follows the box proportions) or a Circle. Center X % and Center Y % move the origin, giving output such as radial-gradient(circle at 50% 50%, …).
• Conic sweeps colors around the center, like a color wheel or a pie chart. Here the slider is labeled Start angle and becomes from 0deg at 50% 50%.

Stop opacity

A stop with an opacity below 100% is written as rgba(). A scrim that darkens the bottom of a hero image, for example, comes out as linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%). Layer it above a photo with a second background and white text stays legible.

Repeating gradients and hard stops

Two stops at the same position create a hard edge instead of a blend. Combine that with Repeating gradient and you get stripes: the Candy stripes preset outputs repeating-linear-gradient(45deg, #f472b6 0%, #f472b6 5%, #fdf2f8 5%, #fdf2f8 10%). For dots, grids and checkerboards, the CSS background pattern generator builds ready-made patterns from gradients.

Editing stops quickly

• Click anywhere on the bar to add a stop. Its color is interpolated from the neighboring stops, so the gradient does not jump when it appears.
• Focus a marker and use the arrow keys to move it by 1% (hold Shift for 10%), or press Delete to remove it. A gradient always keeps at least two stops.
• Reverse mirrors every stop position, which is faster than dragging each marker when you want the colors the other way round.
• The importer understands directions such as to right, angles in deg, turn or rad, and hex, rgb(), hsl() and basic named colors.

Tips and common mistakes

• Muddy middles. Blending two opposite hues, such as orange and blue, can pass through a dull gray. Add a brighter stop in the middle to keep the transition vivid.
• Using background-color. A gradient is an image, so it belongs in background or background-image. background-color: linear-gradient(…) is invalid and ignored.
• Banding on large areas. A very subtle gradient stretched over a full screen can show visible steps. Widen the color difference slightly or add an intermediate stop.
• Text contrast. Text on a gradient has to be readable over both its lightest and its darkest part. Test both end colors with the color contrast checker.

If a brand color arrives as RGB or HSL, convert it with the color converter before typing it into a stop. To fill headings rather than boxes, the CSS gradient text generator adds the background-clip: text rules for you.

Privacy

The gradient is calculated and rendered entirely in your browser. Nothing you design or import is uploaded to a server.