CSS gradient generator
Design CSS background gradients without memorizing syntax. Switch between linear and radial types, set an angle for linear gradients (degrees), and pick two color stops at 0% and 100%.
How to build a gradient
1. Choose linear or radial gradient.
2. For linear, set angle in degrees (0 = bottom to top, 90 = left to right).
3. Enter start and end colors (HEX).
4. Copy the CSS from the result card into your project.
Gradient examples
Linear hero banner (135deg)
Teal #6F9B96 to peach #E8C4B8 at 135° — a diagonal common in landing page headers. Use as background on a full-width section.
Radial spotlight
Radial type with light center and dark edge — simulates a vignette: radial-gradient(circle, #fff 0%, #333 100%).
Vertical fade (180deg)
Angle 180 for top-to-bottom fade from brand color to white — useful behind navigation bars.
When to use this tool
• When you prototype UI backgrounds and want instant visual feedback.
• When you forget whether angle 90deg runs left-right or top-bottom.
• When you need copy-paste CSS for CodePen, Tailwind arbitrary values, or design handoff.
Color stops in detail
A stop is color plus optional position: #ff0000 0%, #0000ff 50%, #00ff00 100%. Browser interpolates RGB between stops. Mid stops create banded sunsets or multi-brand stripes. Start with two stops here, then paste and append a third stop in devtools until it looks right.
Frequently asked questions
What is the CSS syntax for a linear gradient?
background: linear-gradient(angle, color1 0%, color2 100%); Angle is in degrees; colors are stops along the line.
How do color stops work?
Stops mark where each color sits on the gradient line. 0% is the start, 100% the end. This tool fixes two stops; add more in your editor if needed.
Linear vs. radial?
Linear blends along a straight line. Radial blends outward from a center point — good for circles and soft spots.
Which angle values are common?
0deg upward, 90deg rightward, 180deg downward, 135deg diagonal — common for cards and heroes.
Does it set background or background-image?
Output uses the background shorthand suitable for most divs; you can split into background-image if overriding other layers.