Gradient Studio

Layered CSS gradients built from radial glows, linear bands, light beams and grain, mixed with blend modes. Open any preset, tune its layers, and copy the code.

Gradient Studio couldn't load its presets.

It needs a live connection to CrunchCube. Check your internet connection and reload, or open the studio at crunchcube.in.

CSS gradients · blend modes · Tailwind · 40 presets

Layered
gradients,
ready to paste.

Every preset is a stack of CSS gradient layers combined with blend modes: no images, no libraries. Tune the layers, then take the code as CSS, Tailwind, SVG or a full HTML block.

Browse presets

All 40 presets

Ambient: Sunrise Drift, Golden Hour, Midnight Sapphire, Ember Glow, Arctic Frost, Silver Mist, Champagne Fizz, Deep Sea, Mulberry Dusk

Mesh: Pastel Mesh, Candy Mesh, Sage Mesh, Peach Mesh, Ocean Mesh, Violet Mesh, Citrus Mesh

Nebula: Aurora Borealis, Cosmic Dust, Crimson Nebula, Ion Storm, Void Bloom, Solar Wind

Prism: Prism Split, Chromatic Edge, Holo Foil, Spectrum Fold, Oil Slick, Neon Refraction

Lattice: Aurora Beams, Grid Ghost, Diagonal Rays, Scanline, Warp Weave, Crosshatch

Grain: Dusty Rose, Film Sepia, Concrete, Faded Denim, Old Paper, Ash Violet

How to make a layered CSS gradient

  1. Open a preset that's close to what you want. Mesh and light Ambient presets suit light pages; Nebula and Lattice suit dark ones.
  2. Drag each layer's X, Y and Size sliders to move colour where you want it, and Fade to soften it.
  3. Change blend modes per layer. On a light base use multiply; on a dark base use screen.
  4. Copy the CSS, Tailwind, SVG or HTML, or download a PNG. Switch to Cube for a 3D version and an animated GIF.

How the CSS works

Each glow is a radial-gradient that fades to transparent. Several stack in one background-image, and background-blend-mode decides how overlapping colours mix. Beams use repeating-linear-gradient, and grain is a tiny SVG noise filter. Read the full walkthrough in CSS mesh gradients without images.

Frequently asked questions

Is Gradient Studio free?

Yes. Every preset, export and download is free, with no sign-up.

Can I use these gradients in commercial projects?

Yes. The CSS you copy is yours to use in personal and commercial work. A credit link is appreciated but not required.

How do I use the Tailwind export?

Paste the class string onto any element. It uses Tailwind arbitrary values, so it works in Tailwind v3 and v4 without changing your config.

What is the cube view?

It wraps the gradient around a spinning 3D cube made with CSS transforms. Switch to Cube in the editor to copy the cube's HTML and CSS, or download it as an SVG, PNG or animated GIF.

New games, tools and tutorials

About one short email a week. No spam, one-click unsubscribe.