4 Color PointsDraggablePure CSSCopy Code

Color Points

1#ff6b6b(25%, 25%)
2#4ecdc4(75%, 25%)
3#45b7d1(25%, 75%)
4#96ceb4(75%, 75%)
background: 
    radial-gradient(circle at 25% 25%, #ff6b6b 0%, #ff6b6b00 70%),
    radial-gradient(circle at 75% 25%, #4ecdc4 0%, #4ecdc400 70%),
    radial-gradient(circle at 25% 75%, #45b7d1 0%, #45b7d100 70%),
    radial-gradient(circle at 75% 75%, #96ceb4 0%, #96ceb400 70%);

How It Works

1

Pick Colors

Choose 4 colors for your mesh gradient points.

2

Position Points

Drag color points on the grid to create your desired blend.

3

Copy CSS

Click Copy to get the layered radial-gradient CSS code.

Frequently Asked Questions

What is a mesh gradient?
A mesh gradient uses multiple overlapping radial gradients to create smooth, multi-color transitions similar to Figma or Sketch mesh gradients.
How do I position colors?
Drag the 4 color points on the preview grid to position each color. The CSS updates in real time.
Is the output pure CSS?
Yes. The mesh effect is achieved using layered CSS radial-gradients. No images or SVGs needed.
Can I change the colors?
Yes. Click each color point to change its color using the color picker.
Share:Copied!
Was this tool helpful?

Get a free API key + new tools as they ship

100 calls/day, no card, no spam. Built by one person, in public.

About Mesh Gradient

Mesh Gradient solves a specific problem that comes up daily for anyone dealing with developer and design work: doing it once, fast, without an account. The goal was to keep the path from "open the page" to "get the result" as short as possible. No mandatory account, no cookie wall, no upsell at every step. If you find yourself doing this regularly, the rest of the developer suite covers most adjacent tasks with the same approach.

When you'd reach for Mesh Gradient

  • You're on a public or shared machine and don't want to leave traces of what you're working on.

    Travelers, contractors, anyone working from a friend's computer.

    Nothing is uploaded, nothing persists if you're not signed in.

  • You're hitting the daily limit of a paid SaaS and need a backup option for a single quick job.

    Marketers and ops people whose primary tool is metered.

    Stay productive without burning credits.

  • You're cleaning up a folder of files that accumulated over a project and need to standardize them.

    Designers, writers, and developers wrapping up deliverables.

    Drop each file in, copy the output, move on.

  • You need to handle a one-off task right before a meeting and don't have time to install anything.

    Anyone working remotely on a borrowed or restricted machine.

    Open the page, get the result, paste it into your doc — under a minute.

Frequently asked about Mesh Gradient

Can I use Mesh Gradient commercially?
Yes. The output of Mesh Gradient belongs entirely to you, with no licensing restrictions.
What browsers does Mesh Gradient support?
Every modern browser released in the last three years: Chrome, Firefox, Safari, Edge, Brave, Opera.
Do I need to create an account to use Mesh Gradient?
No. Mesh Gradient works without any signup. We only ask for an email if you decide to subscribe to a paid plan.
Will Mesh Gradient change my original file?
Never. Mesh Gradient only reads your input file and produces a new output file.
Does Mesh Gradient work on mobile?
Yes, Mesh Gradient is fully responsive and tested on iOS Safari and Android Chrome.

Deep Dive: Related Research

The Complete Guide to CSS in 2026

30,000 words · 65 min read

The Complete UI/UX Design Systems Guide 2026: Tokens, Typography, Color, Components & Accessibility

30,000 words · 65 min read

Explore More