CSS Gradient Generator
Visually build linear and radial CSS gradients with a live preview and instant code output.
How to Use
- Choose linear or radial gradient type.
- Add color stops and adjust their position with the sliders.
- For linear gradients, set the angle; for radial, set the shape.
- Copy the generated CSS background property.
When to Use This
- Building a hero background without shipping an image, which removes a request and scales cleanly to any viewport size.
- Matching a gradient from a design mockup by eye, moving stop positions until the preview and the comp agree.
- Producing a subtle two-stop overlay to sit behind white text on a photograph, where you need to watch contrast while tuning it.
- Prototyping a multi-stop background quickly, then pasting the declaration into a stylesheet to refine the exact values there.
Frequently Asked Questions
About This Tool
A CSS gradient is not an image file; it is an image the browser generates at paint time from a function. For linear-gradient the angle names the direction the colors travel, with 0deg pointing up the page and 90deg right, rotated from the mathematical convention most people expect. Color stops carry a position, and between two stops the browser interpolates in sRGB, which is why blue to yellow passes through a muddy gray rather than green.
The preview and the CSS declaration stay in step with the controls. You start with two stops, each a color input and a position slider from 0 to 100 percent; a new stop arrives at the midpoint, and the list is sorted by position before the declaration is written. Linear mode exposes an angle from 0 to 360 degrees and radial mode a circle or ellipse shape. Two stops is the floor.
Notes & Limits
- Only linear and radial are generated. Conic gradients, the repeating variants and several layered gradients on one background must be written by hand.
- Stop positions are whole percentages and angles whole degrees, so a 33.3 percent stop or a 22.5 degree angle cannot be set with the sliders.
- Radial mode writes a shape only. Size keywords such as closest-side and farthest-corner, and the at keyword that moves the center, are not exposed.
- Stops come from the browser's color input and are therefore opaque, so a gradient fading out to transparent needs that keyword added afterwards.