PFVPFV Tools
All tools

CSS Gradient Builder

Build linear, radial, and conic CSS gradients with multiple stops; live preview; copy the CSS.

  • css
  • gradient
  • linear-gradient
  • radial-gradient
  • conic-gradient
  • background
  • colour stop

About CSS Gradient Builder

CSS gradients let you smoothly blend between colours as a background image — no PNG required, infinitely scalable, easily editable. There are three kinds: linear gradients run between two parallel lines (with an angle), radial gradients radiate out from a centre point (with a circle or ellipse shape), and conic gradients sweep around a centre point (used for pie charts and conic colour wheels).

Each gradient is a sequence of "stops" — pairs of (colour, position) that the browser interpolates between. Two stops with the same position create a hard edge (useful for stripes and conic charts); a stop with a colour stop hint (a position alone with no colour) shifts where the midpoint of the blend sits. This builder uses the simple "colour + position 0–100%" model that covers the vast majority of real-world gradient declarations.

How to use

Pick a gradient type (linear, radial, or conic). For linear, set an angle in degrees (0° points up, 90° points right, like a compass rotated 90° clockwise — that's the CSS convention) or use one of the eight cardinal preset buttons. For radial, pick ellipse (matches the box) or circle. Conic uses an angle for the starting position of the sweep.

Add or remove stops with the buttons in the Stops section. Each stop has a colour (click the swatch for the picker, or type a hex) and a position (0–100%, controlled by the slider or the number input). The preview at the top updates live; the CSS declaration is shown ready to copy.

Frequently asked questions

  • Why does my linear gradient go in a different direction than I expected?

    CSS uses degrees with 0° meaning "to top" (bottom→top) and angles increasing clockwise — so 90° is "to right", 180° is "to bottom", 270° is "to left". This isn't the same as the trigonometric convention (where 0° is right and angles increase counter-clockwise). The eight preset buttons label the direction with arrows so you don't have to convert in your head.

  • What's the difference between linear, radial, and conic gradients?

    Linear blends along a line — the classic two-colour fade. Radial blends outward from a centre point — think of a spotlight, a sphere, or a dome. Conic sweeps around a centre point like a clock's second hand — most commonly used to draw pie charts or rainbow colour wheels with pure CSS. All three accept the same colour-stop syntax.

  • How do I make a hard edge instead of a smooth blend?

    Place two stops at the same position with different colours. For example, `linear-gradient(red 50%, blue 50%)` produces a sharp horizontal split with red on top and blue on bottom — no fade. This builder allows it: drag two sliders to the same position. It's how stripes, checkerboards, and conic-gradient pie charts are constructed.

  • Can I use named colours, rgb(), hsl(), or transparent in a gradient?

    Yes — any valid CSS colour works as a stop value. This builder writes hex codes because that's the most portable format and the native colour picker returns hex, but you can manually edit a gradient's CSS afterwards to use `transparent` (often used for fade-out overlays), `currentColor`, or any of the modern colour functions like oklch().

  • Is gradient performance a concern?

    For simple two-to-five-stop gradients on a few backgrounds, no. They're generated by the GPU at paint time and are extremely cheap. Complex multi-stop gradients applied to many elements, or animated gradient backgrounds (changing colours or positions in CSS animations), can become a paint bottleneck on lower-end devices — but you'd need dozens of large gradients animating simultaneously before it shows up in a profile.

More Colour tools