Gradients give modern websites depth and energy, but writing gradient CSS by hand means guessing colour stops and angles, saving, refreshing and guessing again. Our free CSS gradient generator makes it visual: choose two or more colours, drag the angle, switch between linear and radial styles, and watch the preview update instantly. When it looks right, copy the exact CSS with one click, complete with the background declaration ready to paste into your stylesheet.
Quick Answer: Pick your colours, set the angle or radial shape, and copy the generated linear-gradient or radial-gradient CSS. Add up to four colour stops for richer blends.
Free Online Tool
CSS Gradient Generator
Design a gradient visually and copy the CSS.
How to Use the CSS Gradient Generator
- Start with the two default colours and click each colour swatch to change it.
- Drag the angle slider for linear gradients to rotate the blend direction (90 degrees runs left to right).
- Switch to radial to preview a glow that radiates from the centre outward.
- Add a third or fourth colour stop for sunset, aurora and brand-style blends.
- Copy the CSS output and paste it wherever a background is needed: a hero section, button or card.
Key Features
- Linear and radial gradient modes with a live full-size preview.
- Up to four colour stops, evenly spaced for smooth, designer-quality blends.
- Angle control plus quick direction presets in degrees.
- One-click copy of clean, production-ready CSS.
- Includes a text-on-gradient preview so you can check contrast for headings and buttons.
Best Practices and Tips
- Blend colours that are neighbours on the colour wheel, or shades of one colour, for gradients that always look harmonious.
- Check text contrast on the lightest part of the gradient; that is where readability fails first.
- For subtle professional backgrounds, keep the two colours within about 20 percent lightness of each other.
- Save your favourite generated values in your design system notes so brand gradients stay consistent across pages.
- Photograph your gradient on a real phone screen before finalising brand colours; OLED screens render saturated blends more vividly than most laptop monitors, sometimes uncomfortably so.
Common Mistakes to Avoid
- Using high-saturation rainbow gradients behind body text, which destroys readability and looks dated.
- Forgetting a solid fallback background colour for very old browsers; add background: your first colour before the gradient line.
- Creating gradients with hard mid-point banding by placing stops unevenly in your head; the preview here prevents that surprise.
Frequently Asked Questions
What is the difference between linear and radial gradients?
A linear gradient blends colours along a straight line at the angle you choose. A radial gradient blends outward from a central point in a circle or ellipse, which suits glows, spotlights and button effects.
Can I use the generated CSS in WordPress?
Yes. Paste it into your theme’s customiser Additional CSS, a block’s custom CSS (where supported), or the style attribute of an HTML block. The code is standard CSS3 and works in every modern browser.
Why does my gradient look different in print or screenshots?
Screens emit light (RGB) while print uses ink (CMYK), and gradients, especially bright blues and purples, can shift noticeably. If a gradient is destined for print, proof it on paper rather than trusting the screen.
How many colours can a CSS gradient have?
CSS allows any number of colour stops. This generator supports up to four, which covers the vast majority of design needs; more stops often create muddy mid-tones unless placed very deliberately.
Do gradients affect page performance?
Barely. CSS gradients are rendered by the browser’s graphics engine and are far lighter than an equivalent background image, with no extra file to download. Extremely large, blurred gradient areas on low-end phones are the only real exception.
How do I use the gradient as a text colour effect?
Apply the gradient as a background to the text element, then add background-clip: text and a transparent text colour in your CSS. The generator’s preview shows the blend itself; the text effect is a presentation trick layered on top of the same gradient value.
Related Tools
- CSS Box Shadow Generator – design soft, realistic CSS box shadows with sliders and presets
- Hex / RGB Color Converter – convert colours between HEX, RGB and HSL with a visual picker
- Favicon Generator – create a favicon from letters or a logo, with install code included
- CSS Minifier – compress CSS by removing comments and whitespace safely