MeshGradient Generator

A normal gradient blends colors along one line. A mesh gradient places colors at points across the whole area and lets them melt into each other, so you get soft, organic blends like an aurora or a sunset sky. They're popular for app backgrounds, story covers and website hero sections.

CSS doesn't have a true mesh gradient, but you can get very close by stacking radial gradients. Each color point is a radial-gradient placed at a position, fading from the color to transparent. A background-color sits underneath and fills the gaps.

The first gradient in the list is drawn on top. The spread is where each color fades out, as a percentage of the distance to the farthest corner. Bigger spreads blend more; smaller spreads give distinct glowing spots.

Shuffle is a quick way to explore. Each press gives a new mix of colors and positions, and you can tweak any result by hand.

• Stick to colors that sit near each other on the color wheel, plus one accent.
• Put points near the edges and corners. Points in the middle tend to look like a spotlight.
• Pick a base color close to your lightest or darkest point so the gaps blend in.
• For text on top, keep the area behind it calm, then check contrast.

The story PNG is 1080 × 1920 pixels, the size of Instagram and TikTok stories and most phone screens. The desktop PNG is 1920 × 1080, standard full HD for laptops, monitors and slides. Positions are percentages, so the same gradient reflows on a tall or wide canvas. The small phone preview shows how it looks when tall.

Paste the CSS onto any element: a hero section, a card or the page body. Gradients drawn in CSS cost almost nothing to load compared with an image, and they stay sharp at every screen size. For a softer, frosted look, add a semi-transparent white layer or a blur on top of the content panel, not the gradient itself.