CSS Gradient Generator
Modern UI backgrounds rarely use a flat colour, hero sections, buttons and cards almost all use a CSS gradient. This generator lets you pick linear or radial, drop as many colour stops as you want, set the angle (for linear) or shape (for radial), and copy a clean background: linear-gradient(…) value ready to paste into your stylesheet.
How to build a CSS gradient
-
1
Pick gradient type
Linear (direction by angle) or radial (circle/ellipse).
-
2
Set the angle or shape
Linear: 0–360°. Radial: circle or ellipse.
-
3
Add colour stops
Each stop is a colour plus a position (0–100%). Two-stop gradients are the baseline; three-stop and more give smoother transitions.
-
4
Copy the CSS
Output is a single `background` property value you can paste into any CSS file.
Syntax cheatsheet
/* Linear */
background: linear-gradient(135deg, #6366F1 0%, #EC4899 100%);
/* Radial (circle) */
background: radial-gradient(circle at center, #6366F1 0%, #EC4899 100%);
/* Multi-stop */
background: linear-gradient(90deg, #fff 0%, #f59e0b 50%, #ef4444 100%);
Angles that actually match intuition
CSS gradient angles differ from trigonometry: 0deg points up (north), 90deg points right (east), 180deg down, 270deg left.
| Direction | Angle |
|---|---|
| Top to bottom | 180deg |
| Bottom to top | 0deg |
| Left to right | 90deg |
| Top-left to bottom-right | 135deg |
Avoiding muddy mid-tones
Linear gradients between complementary colours (e.g. blue → orange) pass through a grey band around 50% where the mix feels “dead”. Fix it by:
- Adding a mid stop in a related hue (blue → purple → orange).
- Using OKLCH interpolation (
linear-gradient(in oklch, ...)) for perceptually smoother blends, supported in all modern browsers as of 2024. - Shifting one endpoint slightly in hue so the mid-tone sits in a warmer family.
Performance tip
Gradients are painted by the GPU and usually cheap. Animating one (background-position tricks, SVG blur) can still hit paint cost, test on a mid-range phone before shipping.
Frequently Asked Questions
CSS gradients measure angle clockwise from the top, whereas standard maths measures counter-clockwise from the right. 90deg in CSS points right; in trigonometry that would be 0°.
Specification allows any number. Practically, more than 4–5 stops tends to feel like a rainbow; two or three well-chosen stops almost always look cleaner.
Yes, paste it as an arbitrary value: class="bg-[linear-gradient(135deg,#6366F1,#EC4899)]". For reusable gradients, define a custom utility in your Tailwind config.
The standard editor sends the gradient settings to the server to render the preview. In the guided flow, type, angle, shape and colour stops also appear in the page URL. Do not enter sensitive information; the tool does not save a reusable gradient project.
Related Tools
HEX Color Picker
Pick or enter a HEX colour and get RGB, HSL, approximate CMYK, relative luminance and contrast ratios against white and black.
Color Palette Generator
Generate monochromatic, analogous, complementary, triadic or tetradic color palettes from a base HEX color and export copy-ready CSS variables.
FPS Counter
Measure browser FPS with requestAnimationFrame, smoothing, min/max frame rate, warnings and an optional graph. Runs locally with no upload or API.
ASCII Table Reference
Full ASCII table from 0 to 127 with decimal, hex, octal, binary, standard names and HTML numeric-reference notation, including NUL, LF and DEL.
Phone Validator
Validate phone numbers by country, detect the region and type, and normalize valid numbers to E.164, international, national and RFC 3966 formats.
Random Color Palette Generator
Generate random color palettes from 2 to 15 swatches, choose a vibrant, pastel, muted or dark style, then copy HEX codes or CSS variables.