Use this free gradient background generator to create linear, radial, and animated CSS gradient backgrounds in seconds — no signup, no design skills required.
How the Gradient Background Generator Works
This tool builds a CSS background gradient by combining a gradient type, one or more color stops, and a direction or position — then outputs ready-to-use CSS you can paste straight into your stylesheet.
Every gradient background is made of three parts:
- Type — linear gradients transition colors along a straight line at a set angle; radial gradients transition colors outward from a center point.
- Color stops — each color you add is placed at a percentage position (0–100%) along the gradient. Two stops make a simple fade; three or more create multi-color blends.
- Direction or position — linear gradients use an angle (0–360°); radial gradients use a center position (e.g. top left, center, bottom right).
Pick a type, adjust your colors and stops, fine-tune the angle or position, then copy the generated CSS into your site’s stylesheet, a Gutenberg block’s custom CSS, or your theme’s style.css.
How to Make an Animated Gradient Background
Toggle Animate Background on to generate a moving gradient that shifts smoothly between color positions using a CSS @keyframes animation — no JavaScript required on your live site.
The animated version works by enlarging the gradient’s background size to 200% and shifting background-position back and forth over a set duration:
.your-selector {
background: linear-gradient(90deg, #0F0D72, #FFC502);
background-size: 200% 200%;
animation: wpexgbgShift 6s ease infinite;
}
@keyframes wpexgbgShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}Use the Slow / Medium / Fast speed control to match the animation to its use case — slower speeds (10–12s) suit full-page hero backgrounds, while faster speeds (3–4s) work better on smaller UI elements like buttons or badges. Animated gradients are pure CSS, so they add virtually no page-weight or JavaScript overhead — a meaningful advantage over gradient background images or GIFs for Core Web Vitals.
When to Use a Gradient Background
Gradient backgrounds work best where a flat color feels static but a photo would feel heavy — hero sections, call-to-action blocks, and section dividers are the most common placements.
- Landing page heroes and CTAs — a subtle gradient behind a headline or button adds visual depth without slowing down page load, which matters directly for Core Web Vitals and hosting performance.
- Section backgrounds and dividers — alternating flat and gradient sections helps break up long pages without needing custom imagery.
- Buttons, badges, and UI accents — a small animated gradient on a primary CTA button is a lightweight way to draw attention.
If you’re building this on WordPress, the generated CSS drops directly into the Cover block’s custom CSS class, a Group block background, or your theme.json color/gradient definitions — so it fits standard block-editor workflows without a page builder plugin.
FAQ
Is this gradient background generator free?
Yes — this gradient background generator is completely free to use, with no signup, account, or watermark on the CSS output.
How do I add a CSS gradient background to my website?
Copy the generated CSS from the output panel and paste it into your site’s stylesheet, a block’s custom CSS field, or an inline style attribute, replacing .your-selector with your actual element’s class or ID.
How do I make an animated gradient background?
Toggle Animate Background on in the tool — it automatically adds a background-size and @keyframes animation to the CSS output, so the gradient shifts continuously without any JavaScript.
Can I use more than two colors in a gradient background?
Yes — click “Add Color Stop” to add up to six colors, then drag each stop’s position slider to control where each color sits along the gradient.
Should I use a linear or radial gradient for a background?
Linear gradients suit full-width sections and hero backgrounds because the color transition follows a consistent angle edge-to-edge, while radial gradients suit centered focal points like icons, badges, or spotlight-style call-to-action areas.