Building CSS Gradients for the Web
What this generator does
A CSS gradient blends two or more colors across a shape, and this generator turns that blend into ready-to-paste CSS without hand-writing the syntax. You choose a gradient type, drop in color stops, and the tool assembles the matching background rule — either a linear-gradient() or a radial-gradient() function — while a live preview mirrors every change the moment you make it.
Each color stop carries its own color, its position along the track as a percentage, and its opacity, so you decide exactly where one hue gives way to the next. Presets hand you a finished palette to tweak instead of a blank canvas.
When to use it
Reach for it whenever a flat fill feels too plain — hero backgrounds, buttons, cards, badges, and overlay tints all read better with a subtle color transition. Designers lean on it to prototype a look in seconds; developers use it to grab correct syntax without memorizing angle keywords and percentage rules.
It also shines when you need to rebuild an existing gradient: recreate it stop by stop, nudge the angle, and paste the result straight into a stylesheet or a styled-component.
Example: a linear gradient
Say you want a diagonal fade from blue to purple. Set the type to linear, place a first stop at 0% and a second at 100%, then set the angle to 135deg. The output becomes background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);. Switch to radial and those same two stops render as radial-gradient(circle, #3b82f6 0%, #8b5cf6 100%), spreading outward from the center instead of traveling along a line.
Gradient types, stops, and edge cases
Linear gradients travel along a straight line whose angle or direction you set; radial gradients spread from a center point with a shape (circle or ellipse), a size such as farthest-corner, and an adjustable X/Y position. Adding more than two stops builds multi-color bands, and placing two stops at the same position creates a hard color step instead of a smooth blend. Opacity below 100% lets a gradient sit over a photo or another layer. Once the design looks right, copy the CSS or download it and drop it into your project.