liminfoMesh Gradient Generator
Free web tool: Mesh Gradient Generator
CSS Code
background-color: #ff6b6b;
background-image:
radial-gradient(at 0% 0%, #ff6b6b 0px, transparent 50%),
radial-gradient(at 100% 0%, #feca57 0px, transparent 50%),
radial-gradient(at 100% 100%, #ff9ff3 0px, transparent 50%),
radial-gradient(at 0% 100%, #54a0ff 0px, transparent 50%);About Mesh Gradient Generator
The Mesh Gradient Generator is a visual CSS tool that creates the popular "mesh gradient" effect seen in modern UI design — a soft, multi-color background that blends seamlessly without hard edges. The technique uses four layered CSS radial-gradient() functions, each anchored to a corner of the element (top-left at 0% 0%, top-right at 100% 0%, bottom-right at 100% 100%, and bottom-left at 0% 100%), all with a transparent 50% endpoint. This creates the characteristic smooth color-blending mesh effect that has become a signature aesthetic in app interfaces, hero sections, and landing pages.
Designers, frontend developers, and marketing teams use this tool to quickly prototype and export gradient backgrounds for websites, mobile apps, presentations, and social media graphics. The live preview updates instantly as you change any of the four corner colors, giving you real-time visual feedback before copying the code. Unlike SVG-based mesh gradients or image files, the CSS output is pure code — it has no file size, scales perfectly at any resolution, and adapts to dark/light themes with CSS custom property overrides. The Tailwind CSS arbitrary value syntax is also directly compatible with this output.
The tool generates a two-property CSS snippet consisting of background-color (set to the top-left corner color as a fallback) and background-image (containing the four stacked radial-gradient declarations). Each gradient is rendered using radial-gradient(at X% Y%, color 0px, transparent 50%), where the at keyword positions the gradient center and the 50% transparent stop creates the soft blend radius. Six named presets — Sunset, Ocean, Forest, Purple Haze, Fire, and Aurora — are included as one-click starting points, each defined by a carefully curated set of four hex colors that produce visually cohesive combinations.
Key Features
- Real-time live preview updates as you change any of the four corner colors
- Individual color picker + hex input for each corner: Top-Left, Top-Right, Bottom-Right, Bottom-Left
- 6 built-in presets: Sunset, Ocean, Forest, Purple Haze, Fire, and Aurora
- Generates production-ready CSS using background-color + 4 layered radial-gradient() functions
- One-click Copy CSS button to copy the complete two-property CSS snippet to clipboard
- Preview height is configurable to visualize the gradient at your intended display size
- Rounded preview container with border to show how the gradient looks in a card or panel context
- 100% client-side — all color calculations happen in the browser, nothing is sent to a server
Frequently Asked Questions
What is a mesh gradient?
A mesh gradient is a type of background effect where multiple colors blend together smoothly in a non-linear pattern, creating a soft, cloud-like appearance. Unlike a simple linear or radial gradient with two colors, a mesh gradient uses multiple color sources positioned at different points to create a rich, multi-dimensional color field. In CSS, this is achieved by stacking several radial-gradient() layers on top of each other.
How does the CSS radial gradient technique work for mesh gradients?
The tool generates four radial-gradient() functions, each positioned at a different corner using the at keyword: at 0% 0% for top-left, at 100% 0% for top-right, at 100% 100% for bottom-right, and at 0% 100% for bottom-left. Each gradient starts with a solid color at 0px and fades to transparent at 50%. The four gradients are layered in the background-image property and blend together visually, creating the mesh effect.
Can I use this CSS in Tailwind CSS projects?
Yes. You can paste the generated CSS directly into a Tailwind CSS component using arbitrary values. For example, you can apply it as an inline style, or define it as a custom class in your tailwind.config.js. Alternatively, you can use Tailwind's [--tw-gradient-*] CSS variables or apply the background-image property via Tailwind's arbitrary value syntax like bg-[radial-gradient(...)]. The output is standard CSS and works in any framework.
What are the preset gradients included?
Six presets are included: Sunset (warm reds, pink, and blue), Ocean (teal, green, and blue tones), Forest (green and teal shades), Purple Haze (purple and blue tones), Fire (red, orange, and yellow), and Aurora (cyan, green, yellow, and orange). Each preset is defined by four hex color values, one for each corner. Click a preset button to apply it immediately to the preview and color inputs.
How do I apply the generated CSS to my project?
Copy the CSS output using the Copy CSS button. In your HTML/CSS, apply the two properties (background-color and background-image) to the element you want to style. For example, add them to a div's inline style attribute or to a CSS class. The background-color acts as a fallback for browsers that do not support radial gradients, though all modern browsers fully support this syntax.
Does the mesh gradient affect performance?
CSS radial gradients are rendered by the browser's GPU and have excellent performance compared to image-based backgrounds. They have zero file size since they are pure CSS, scale to any resolution without pixelation, and can be animated smoothly with CSS transitions or keyframe animations. They do not cause layout shifts since no image file needs to load.
Can I animate the mesh gradient?
The generated CSS is static, but you can animate mesh gradients using CSS custom properties (variables) combined with @keyframes animations. Define the corner colors as CSS variables (--c1, --c2, etc.), use them in the gradient functions, and animate the variables between different color values. For more advanced animated mesh gradients, JavaScript-driven canvas or WebGL approaches are more flexible but require more code.
Is the generated CSS compatible with all browsers?
Yes. The radial-gradient() function with the at keyword for positioning is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. The background-color fallback ensures that even very old browsers that might not support gradients will still show a solid color background. Internet Explorer does not support the full radial-gradient specification, but IE is effectively end-of-life and no longer a browser target for modern web development.