How to make a gradient background for your website
July 9, 2026 · 2 min read
A great background sets the mood for an entire page before a visitor reads a single word. Here's a simple, repeatable way to make one that looks intentional — not like a default template.
Start with a mood, not a color
Before touching sliders, decide how the page should feel: calm and airy, bold and energetic, dark and premium. That single decision guides everything else — your palette, contrast, and how much motion or texture you add.
Build the gradient
- Pick a base shape. Linear feels clean and modern; radial and conic draw the eye to a focal point; a warped noise field feels organic and hand-made.
- Choose 3–4 colors that sit near each other on the color wheel. Analogous palettes read as "designed"; wildly clashing colors rarely do.
- Add a little warp and grain. A touch of domain warp keeps the blend from looking flat, and subtle film grain hides banding on large areas.
In the studio, you can hit Randomize a few times to explore directions quickly, then fine-tune the one that fits your mood.
Keep your text readable
The most common mistake is a background that fights the content. Two quick fixes:
- Keep contrast gentle behind text — push the busy, high-contrast part of the gradient toward the edges or a corner.
- If text still struggles, drop a semi-transparent panel behind it, or lower the gradient's overall contrast.
Export at the right size
Export at roughly twice your display size so it stays crisp on high-DPI screens, and prefer WebP for photographic gradients to keep the file small. For a moving hero, export a short video loop instead of a static image.
When it's ready, copy the studio link to save the exact look — you can reopen and tweak it anytime.
Ready to make one? Open the studio →