Tools Blog

CSS Mesh Gradient

Create beautiful mesh gradient backgrounds with 4 color points and adjustable blur. Copy the pure CSS output and use it in any project.

4 color pointsSmooth blendingCSS only

① Pick 4 colors for each corner ② Adjust blur intensity ③ Copy the CSS output

Top-left color
#C9B89A
Top-right color
#7A5C38
Bottom-left color
#1A3A5C
Bottom-right color
#2A5A3A
Blur intensity (px): 160px
How it works
The mesh gradient uses four radial-gradient layers, each anchored at a corner. The gradients blend into each other through CSS transparency, and the blur intensity controls how far each gradient spreads.
Blur intensity
Higher blur values make the gradients spread further and blend more smoothly. Lower values keep each color more concentrated at its corner.
CSS output
The generated CSS uses background-color as a base and layers multiple radial-gradient definitions on background-image. No JavaScript or canvas is needed.
Preview
CSS output
background-color: #c9b89a; background-image: radial-gradient(ellipse at 0% 0%, #c9b89a 0%, transparent 160px), radial-gradient(ellipse at 100% 0%, #7a5c38 0%, transparent 160px), radial-gradient(ellipse at 0% 100%, #1a3a5c 0%, transparent 160px), radial-gradient(ellipse at 100% 100%, #2a5a3a 0%, transparent 160px);

What is a mesh gradient?

A mesh gradient is a smooth, multi-point color blend that produces fluid, aurora-like backgrounds. Unlike a standard linear or radial gradient (which transitions between two endpoints), a mesh gradient places multiple color points across the surface and interpolates smoothly between them. The CSS implementation uses overlapping radial-gradient layers anchored at each corner — a lightweight, zero-image technique compatible with all modern browsers. Mesh gradients are popular for hero sections, app backgrounds, card designs, and premium landing pages.

Frequently asked questions

A mesh gradient is a type of gradient that blends multiple colors placed at different points across a surface, rather than between two endpoints. The result is a fluid, organic color field that resembles auroras or soft light effects.
The CSS mesh gradient uses four radial-gradient layers — one anchored at each corner — that spread outward and blend into transparency. These layers are stacked on background-image and blend naturally where they overlap.
A linear gradient transitions colors along a single axis (e.g. left to right). A mesh gradient places color points at arbitrary positions across the surface, producing smooth multi-directional color blending with no hard direction.
The blur parameter controls the spread radius of each radial-gradient layer. A higher value makes each color spread further across the canvas before fading to transparent, creating longer, softer blends. A lower value keeps each color more concentrated at its anchor point.
CSS-only mesh gradients are limited to corner anchor points. True mesh gradients (as in Figma or Illustrator) can have color points anywhere on the surface. For more complex meshes, canvas or WebGL solutions are needed.
Copy the CSS output and apply it to any HTML element, such as a hero section, body, or card container. The background-color ensures full coverage as a fallback if gradients overlap imperfectly.
The radial-gradient function is supported in all modern browsers (Chrome, Firefox, Safari, Edge) since 2013. The generated CSS has no compatibility issues for any site targeting modern browsers.
Related Articles
CSS 14 min read
CSS Gradients: The Complete Guide from Linear to Conic
Master all three CSS gradient types — linear, radial, and conic — with advanced color stops, angles, hints, and real patterns like striped backgrounds, gradient text, and mesh gradients.
CSS 6 min read
CSS Gradient Generator: Complete Guide to Linear and Radial Gradients
Master CSS gradients: linear, radial, and conic. Learn syntax, color stops, angles, and creative techniques for backgrounds, buttons, and UI elements.

Explore Our Network

ntool.io Free network diagnostics toolkit — ping, traceroute, DNS lookup, port scanner, and more Visit → capops.io Free financial calculators — compound interest, mortgage, retirement planning, investment tools and more Visit →