Gradient Backgrounds for Websites: A Practical Guide
Ugo L.Gradient backgrounds are one of the fastest ways to make a website feel designed instead of default. But most gradient backgrounds look generic because they use the same flat CSS fades everyone else uses.
Here is how to do it better.
Start with the right palette
The palette makes or breaks the gradient. A random collection of colors will look muddy. A harmonious palette (analogous, complementary, triadic) will look intentional.
Some palettes that work well for websites:
Browse more in our palette directory or explore by mood.
Go beyond linear-gradient
A linear-gradient(to right, #3b82f6, #dbeafe) works, but it is predictable. Everyone has seen it.
Mesh gradients blend colors across an entire surface with organic flow. They feel more like a physical material than a CSS trick. Here is one:
The same five colors, but rendered as an animated GPU gradient instead of a straight line.
You can try this in the generator and export it as a PNG, WebP, video, or CSS code.
Hero section tips
The hero is where gradients shine the most. A few rules:
1. Use an image export, not live rendering. A 1920x1080 WebP gradient loads in milliseconds and works everywhere. No JavaScript needed.
2. Add an overlay for text. Mesh gradients have uneven color distribution. A semi-transparent dark or light overlay ensures your headline is always readable.
.hero {
position: relative;
background-image: url('/hero-gradient.webp');
background-size: cover;
}
.hero::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.3);
}3. Match the gradient to your brand. Lock your brand color in the generator, then shuffle until the surrounding colors feel right. Export, done.
Accessibility
Gradients and text do not mix well unless you are careful. The problem: mesh gradients have varying contrast across the surface. One corner might be light enough for dark text, while another is not.
Two rules:
- Always use an overlay between gradient and text
- Test contrast at the worst spot, not just the average
Read our full gradient accessibility guide for the detailed method.
Export what you need
From a single palette in InstantGradient, you can export:
- PNG / WebP for backgrounds (up to 4K with Pro)
- Animated MP4 for social content and presentations
- CSS + Tailwind code for developers
- Color tokens (hex, JSON, CSS variables) for design systems
If you are building a product or workflow that needs gradient backgrounds at scale (think: a SaaS that generates branded content, a design tool that ships with preset palettes, or a site builder that offers gradient backgrounds), the InstantGradient API lets you generate palettes and look up color data from your own backend. No manual export step, no copy-pasting hex codes. One HTTP call, and you have a harmonious palette ready to render.
Keep reading
Your next gradient is one spacebar away
Free, no account needed. Just open and start creating.
Start creating