Linear and radial gradients with live preview
Gradient syntax changed over the years; the prefixed forms are mostly gone. Modern linear-gradient and radial-gradient are still easy to get wrong on angle and stop order. This page shows a full-width preview and one background declaration.
Linear default: 90deg, indigo to pink. Radial switches to circle from center. Reset restores linear defaults. Copy CSS is one click.
Nothing is uploaded. Preview renders in your browser with the same value written to the output field.
Combine with shadow and minify
Cards on gradient heroes need box-shadow for depth. Use the CSS Box-Shadow Generator on the card layer while this page owns the section background.
Convert brand colors between hex and hsl with the Color Code Converter when the pickers are not exact enough.
Ship fewer bytes with the CSS Minifier and Optimizer after you merge gradient and layout rules.
After you copy
Paste into your component CSS or a utility class. For repeating patterns or conic gradients, extend the copied line manually.
Angle 0deg points up in standard syntax; 90deg goes left to right. If the preview looks rotated vs your design tool, adjust by 90 degree steps.
Meta tags for the page using this background: Meta Tags Generator.
Frequently Asked Questions (FAQ)
What gradient types are supported?
Linear with 0-360 degree angle, and radial with circle keyword. Toggle switches type; angle slider hides for radial. Preview and CSS output update live.
How many color stops can I set?
Two color pickers for start and end. Output is linear-gradient(angle, color1, color2) or radial-gradient(circle, color1, color2). Multi-stop bands need manual editing after copy.
What CSS property is generated?
background: ...; one declaration suitable for a div or section. Copy the full line into your stylesheet or inline style.
Can I match a brand hex exactly?
Color inputs are native pickers. For precise hex from a style guide, use the Color Code Converter and paste hex into your editor, or pick the closest swatch here.