CSS Gradient Builder

One input per line. Output is numbered to match the input order.
Pinned tools are listed in your favourites on the home page.Copies a link to this tool that carries your current input, so it opens ready to run.Gives you an iframe snippet for putting this tool on your own site.
%
%
90°
Ctrl+Enter Run  · Ctrl+Shift+C Copy  · Esc Clear

Understand CSS Gradient Builder

Builds linear, radial, and conic CSS gradients from color stops with a live preview and a copyable background declaration.

How it works

A gradient is drawn along a line (linear), outward from a center point (radial), or around a center point (conic), with each color stop pinned to a percentage along that path and the pixels between stops interpolated. CSS angles for linear gradients are measured clockwise from "to top", so 0deg runs bottom to top, 90deg runs left to right, and 180deg runs top to bottom — which is the opposite convention from the one most drawing tools use. Interpolation happens in sRGB by default, channel by channel, which is why the midpoint between blue and yellow comes out gray rather than green.

When to use it

  • Producing a hero or section background without hand-writing the stop syntax
  • Building a subtle two-stop overlay to place text over an image safely
  • Creating a conic gradient for a progress ring, pie segment, or color wheel
  • Getting the exact CSS for a gradient a designer specified as an angle and two hex values

Watch out for

  • A gradient is an image, not a color. It sets background-image, so `background-color` still shows through any transparency and remains the fallback if the gradient fails to apply — set both.
  • Two complementary hues interpolate through gray. Add a midpoint stop in a hue between them, or specify an interpolation color space such as `in oklch`, to keep the transition saturated.
  • Large, low-contrast gradients band visibly. Eight bits per channel cannot express a smooth ramp across 1000 pixels of near-identical color; add a subtle noise overlay or increase the color distance.
  • Percentage stops are relative to the gradient line, not to the element, and the gradient line for an angled linear gradient is longer than the box. A stop at 50% is not the geometric center of the element unless the angle is 0 or 90 degrees.

Frequently Asked Questions

How to make a gradient background in CSS?

Use the background property with a gradient function: background: linear-gradient(135deg, #5C5BFE, #F2A03D). The first argument is the angle (0deg = bottom to top, 90deg = left to right). Use radial-gradient() for circular gradients or conic-gradient() for angular ones.

How to add linear gradient in CSS?

Add background: linear-gradient(direction, color-stop1, color-stop2, ...) to any element. Direction can be an angle (45deg) or keyword (to right, to bottom right). Example: background: linear-gradient(to right, #667eea, #764ba2). Works on any block element.

How to use linear gradient in CSS?

linear-gradient() creates a smooth transition between color stops along a line. Use it for button backgrounds, hero sections, card overlays, and diagonal dividers. Stack multiple gradients with comma separation for layered effects. This builder outputs the CSS property ready to paste.

How to Use CSS Gradient Builder

  1. Paste or type your input in the input area above.
  2. The tool processes your input automatically or click Run.
  3. Copy or download the result using the action buttons.
  4. Use Ctrl+Enter to run quickly from the keyboard.