Gradient Generator

Design mesh gradient backgrounds and frosted-glass cards visually, then copy the CSS or Tailwind classes.

Never uploaded
Works offline
Free, no sign-up

Design

Glass cardYour content goes hereText stays readable over the gradient.

Colours

Background

Point 1 · spread55%
Point 2 · spread50%
Point 3 · spread55%
Point 4 · spread45%

Drag the dots on the preview to move each colour.

Glass card

Show

TintFill18%Blur16pxSaturation160%Border30%Corner radius24pxSoft shadow

Code

.mesh {
  background-color: #0b1026;
  background-image: radial-gradient(at 15% 20%, #3d55d6 0px, transparent 55%),
    radial-gradient(at 80% 15%, #16c2a3 0px, transparent 50%),
    radial-gradient(at 70% 85%, #8b5cf6 0px, transparent 55%),
    radial-gradient(at 20% 90%, #0ea5e9 0px, transparent 45%);
}

.glass {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

backdrop-filter works in all current browsers. Glass effects need something colourful behind them: on a flat background they look like a plain card.

Processed on this device. Nothing is sent to a server.

How to use the Gradient Generator

Step 1Pick a starting pointA preset, or Shuffle for a random palette.
Step 2Shape itDrag colour points, change colours and spread, tune the glass.
Step 3Copy the codePlain CSS or Tailwind classes, ready to paste.

How mesh gradients and glass cards work

A mesh gradient here is several radial gradients layered on a base colour. Each one starts as a solid colour at a point and fades to transparent, so neighbouring colours blend softly. It’s pure CSS, with no image to download, and it scales to any size.

The glass effect comes from backdrop-filter: blur() softens whatever is behind the card, saturate() keeps the colours from turning grey, and a semi-transparent fill plus a faint light border make the edge readable. It only looks like glass when there’s something colourful behind it, which is why it pairs well with a mesh background.

For accessibility, keep enough contrast between text and the busiest part of the background. The preview switches the text colour automatically based on how light the gradient is.

Questions

Does backdrop-filter work in all browsers?

Yes, in all current versions of Chrome, Edge, Firefox and Safari. The CSS includes the -webkit- prefix for older Safari versions.

How do I use the Tailwind output?

Paste the classes onto your elements. They use arbitrary values, which work in Tailwind CSS v3 and v4 without changing your config.

Is a CSS gradient faster than a background image?

Usually, yes. It adds a few hundred bytes of CSS instead of a large image download, and it never looks blurry on high-resolution screens. Very large blur values on glass cards can cost some performance on low-end phones, so keep the blur moderate.