Design Tool
CSS Gradient Generator
Build smooth CSS gradients in real time. Switch between linear and radial, tune color stops and angle, then copy the ready-to-use background declaration — everything runs locally in your browser, nothing is uploaded.
Type
Angle
135°Color Stops
Preview
CSS
background: linear-gradient(135deg, #a35fff 0%, #22d3ee 100%);How it works
The generator emits a single CSS background declaration. A linear-gradient is written as linear-gradient(angle, color stops): the angle sets the direction (0deg points up, 90deg points right, 180deg points down), and each stop is a color plus a percentage position along that line. The browser interpolates every pixel between adjacent stops to produce a smooth blend. A radial-gradient instead radiates outward from a center point (here circle at center), blending from the first stop outward to the last. The tool sorts stops by position, joins them with commas, and prefixes the declaration with background: so you can paste it straight into a stylesheet or a Tailwind arbitrary value.
Use cases
- Hero banners and section backgrounds that stay crisp at any viewport size.
- Buttons, pills and badges with subtle two-tone depth.
- Brand color transitions on cards, headers and landing pages.
- Gradient overlays on images to improve text legibility.
- Skeleton loaders and placeholder shimmer effects.
Troubleshooting
- Banding: add an intermediate stop near the transition or overlay a subtle noise texture.
- Direction feels wrong: 0deg points up, not right — 90deg runs left-to-right.
- Solid block of color: two stops were placed at the same percentage.
- Older browsers: keep a solid background fallback declared before the gradient.
FAQ
How do I make a horizontal left-to-right gradient?
Set the angle to 90deg. In CSS, 0deg points up (to top), 90deg points right, 180deg points down and 270deg points left, so a 90deg linear-gradient runs horizontally from left to right.
What does the percentage next to each color mean?
It marks the position along the gradient line where that color is at its purest. Colors between two stops are smoothly interpolated, so 0% is the start, 100% is the end, and 50% sits in the middle.
Can gradients use transparency?
Yes. CSS gradients accept rgba() or 8-digit hex colors with an alpha channel, which is useful for overlays and fades. This generator currently emits solid hex stops, but you can paste rgba values into the copied CSS.
Why does my gradient look banded?
Banding usually appears on low-bit-depth screens with very gradual transitions. Adding an intermediate color stop close to the problem area, or overlaying a subtle noise texture, smooths the visible steps.
Does this support conic gradients?
No. This tool covers linear and radial gradients only. Conic gradients (conic-gradient) use angle-based sweeps and are supported separately in CSS.