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%. The preview updates instantly; copy the full background or background-image declaration into your stylesheet. Supports HEX color input with validation.
Angle (°)
Color 1
Color 2
CSS
background: linear-gradient(135deg, #6f9b96 0%, #e8c4b8 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.
When to choose something else
• When you need more than two color stops — extend the copied CSS manually or use a design app.
• When you want conic (sweep) gradients — not supported here.
• When you need automatic dark-mode variants — duplicate and adjust colors separately.
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.
Linear gradient angles
CSS measures angles clockwise from “up” (0deg). That differs from math class where angles often start from the right. If a gradient looks rotated wrong, add or subtract 90deg. Use devtools live editing alongside this generator for fine tuning.
Performance and fallbacks
Gradients are GPU-friendly on modern browsers. For very old clients, set a solid background-color fallback to the lighter stop color before the gradient line.
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.
Are colors sent to a server?
No. Preview renders locally.
Is this free?
Yes, no account needed.