Layered backgrounds in plain CSS
Gradient Lab
A background that looks expensive is almost never a single gradient. It is two or three translucent layers with different blend modes and blur over a solid base: one layer reads as fill, the stack reads as light landing on a surface. There are 224 such stacks here, and every one comes apart: change the mode, the blur, the opacity, add grain. What you take away is code, not a picture — for Tailwind v4, plain CSS, variables, or a CSS-in-JS object. Contrast for a heading and body text over the chosen background is measured alongside, because a beautiful background that swallows its caption is not usable. Everything runs in your browser and nothing is uploaded.
A heading over the background
Body copy of the kind that usually sits in a paragraph under the heading.
Measured against the solid base. The layers above move it around, so treat the number as a guide rather than a verdict, and look at it too.
screen · radial-gradient(ellipse 85% 75% at 20% 16%, rgba(255,107,53,0.92…
screen · radial-gradient(ellipse 70% 80% at 84% 82%, rgba(255,40,0,0.70) …
overlay · linear-gradient(200deg, rgba(255,200,150,0.18) 0%, transparent 4…
{/* Codearia Ember — Tailwind v4, arbitrary values, no config needed */}
<div className="relative isolate overflow-hidden [background-color:#0a0a0a]">
{/* layer 1 */}
<span className="absolute inset-0 [background-image:radial-gradient(ellipse_85%_75%_at_20%_16%,_rgba(255,107,53,0.92)_0%,_rgba(255,72,20,0.34)_42%,_transparent_72%)] [mix-blend-mode:screen] [filter:blur(122px)]" />
{/* layer 2 */}
<span className="absolute inset-0 [background-image:radial-gradient(ellipse_70%_80%_at_84%_82%,_rgba(255,40,0,0.70)_0%,_rgba(140,24,0,0.26)_48%,_transparent_76%)] [mix-blend-mode:screen] [filter:blur(166px)]" />
{/* layer 3 */}
<span className="absolute inset-0 [background-image:linear-gradient(200deg,_rgba(255,200,150,0.18)_0%,_transparent_46%,_rgba(0,0,0,0.50)_100%)] [mix-blend-mode:overlay]" />
<div className="relative">{children}</div>
</div>The Codearia category is ours. The other 206 backgrounds come from Aura by CristianOlivera1, MIT licensed. github.com/CristianOlivera1/Aura
A good gradient background for a website, in plain CSS
Pick a background from 224, take it apart layer by layer, and copy the code. Every one is built from two or three translucent layers with blend modes and blur, which is why it reads as light rather than as fill. Export goes to Tailwind v4, plain CSS, variables or CSS-in-JS. Text contrast over the background is measured as you go.
How to use it
- 1Pick a background in the gallery, or filter by category and mood
- 2Open the layers and tune the blend mode, the blur and the opacity
- 3Copy the code in the format you need and check the heading contrast
The details
- Backgrounds
- 224
- Categories
- 9: Codearia, aura, mesh, nebula, prism, lattice, grain, glass, flux
- Export formats
- Tailwind v4, CSS, variables, CSS-in-JS
- Technique
- Plain CSS: stacked layers, mix-blend-mode and blur
- Dependencies
- None: no canvas, no WebGL, no images
- Where it runs
- In your browser, nothing uploaded
Common questions
Why does one gradient look cheap and these do not?
A single linear-gradient is a flat fill: the eye reads the ramp at once and moves on. Each background here stacks several translucent layers in modes like soft-light and hard-light, blurred on top of that. The layers interfere with one another, and what comes out is not a ramp between two colours but light on a surface.
Does it slow a page down?
No. There is no canvas, no WebGL and no images: the browser draws it with ordinary CSS. The one thing worth watching is a large blur on phones, since blur is GPU work. The export uses different blur values for a full-page background and for a card.
Can I put text over one of these?
Sometimes yes, sometimes no, and only a measurement tells you which. The tool shows the contrast of a heading and of body text over the chosen background as a number. A background that swallows its own caption is not usable, however good it looks.
Where does the catalogue come from?
From two places. 206 of them come from Aura, an open project under the MIT licence by CristianOlivera1, and the credit sits in the tool's footer. The other 18 are ours, built in the Codearia palette, and they open the gallery under the Codearia category. Tailwind v4 export, the agent prompt, the contrast check and the interface are ours too.
