Skip to content
Lizely

Mesh Gradient Generator

Layer four standards-based radial gradients over a base color, tune their colors and fade spread, preview the result, and copy exact CSS locally.

Privacy: your files never leave your device. All processing happens locally in your browser.

How to use

  1. 1.Choose four mesh colors and a base background color.
  2. 2.Adjust the fade spread while watching the live CSS preview.
  3. 3.Copy the complete background declarations.
  4. 4.Test contrast, paint cost, and cross-browser rendering in the real component before shipping.

About Mesh Gradient Generator

Mesh Gradient Generator builds a colorful mesh-style background from four layered CSS radial-gradient images and one base color. Choose each mesh color, adjust the fade spread from 10% through 90%, inspect the live preview, and copy the complete background-color and background-image declarations. The result uses standard CSS rather than canvas, SVG, raster export, a rendering library, or an uploaded asset. It can scale with an element without adding an image request.

Each layer is a circle centered at one of four fixed positions near the corners: 15% 20%, 85% 15%, 20% 85%, and 80% 80%. Its selected color begins at the center and transitions to transparent at the chosen percentage. CSS paints the comma-separated background images as layers, with the first listed gradient closest to the viewer. The base background color fills areas where all layers are transparent and provides a predictable fallback if a gradient does not cover the box completely.

Spread controls how far each color remains visible before reaching transparency. A small value produces compact islands with more base color between them. A larger value blends layers across more of the element and can create softer mixed regions. The control is deliberately bounded and integer-only so copied output remains understandable and testable. It is not a physical blur radius, perceptual interpolation setting, noise field, or true mathematical mesh surface. Browser color interpolation and display profiles can affect the perceived blend.

The preview uses the exact declarations shown in the output. Six-digit hexadecimal colors are validated before generation, and the browser color inputs emit that form. The generated gradients use explicit circle, position, zero-percent color stop, and transparent terminal stop syntax. You can paste the declarations into a class, custom property workflow, CSS module, or style sheet. Add size, repeat, attachment, clipping, or animation rules separately only when the design actually requires them.

Text contrast needs separate testing. A visually attractive gradient can create locally bright and dark areas that make one foreground color unreadable. Test headings, body copy, links, focus indicators, and controls across the entire background, not just at the center. Consider a translucent surface layer or a simpler solid section behind long text. Respect forced colors, high contrast modes, reduced motion, and print styles. This tool does not calculate WCAG contrast because the background varies continuously by position.

Layered gradients are usually lightweight, but large animated backgrounds or frequent style changes can increase paint cost and power use. Prefer a static background for normal page sections. If you animate positions or colors, measure on representative mobile hardware and honor prefers-reduced-motion. Avoid huge offscreen elements and excessive filter effects. CSS gradients can render with small differences across browsers, GPUs, color spaces, screenshots, and exported PDFs, so inspect the actual target environment.

All calculation and copying happen in the current tab. No palette, CSS, preview, or screenshot is uploaded or saved, and the tool adds no dependency. Eight standard-derived fixtures assert the transparent stop at spreads from 20% through 90%; independent tests lock four unique positions, exact CSS structure, six-digit hex validation, and spread boundaries. For production design systems, move final colors into named tokens, document intended foreground treatment, and add visual regression coverage at the component sizes you ship.

Methodology & sources

Validates five six-digit hex colors and an integer spread from 10 to 90, creates four circle radial-gradient layers at fixed unique percentage positions, joins them in paint order, and emits the same CSS used by the live preview.

Frequently asked questions

Is this a canvas or image export tool?
No. It generates layered CSS radial gradients and a base color, with no raster file or canvas.
Why can text contrast change across the preview?
The background color varies by position as translucent gradient layers overlap, so one foreground color may not meet contrast everywhere.
Will every browser render identical colors?
The syntax is standard, but interpolation, color management, GPU rendering, screenshots, and PDFs can produce small visual differences.

Related tools

Developer Tools guides

View all