Content is loading…
Generate modern mesh-gradient backgrounds with overlapping radials.
background-color: #1e1b4b; background-image: radial-gradient(at 10% 52%, #06b6d4 0px, transparent 50%), radial-gradient(at 52% 28%, #fbbf24 0px, transparent 50%), radial-gradient(at 95% 70%, #fcd34d 0px, transparent 50%), radial-gradient(at 24% 95%, #0ea5e9 0px, transparent 50%), radial-gradient(at 43% 61%, #f472b6 0px, transparent 50%);
Create stunning mesh / soft-blob backgrounds using overlapping radial gradients — the trending modern look. Randomize palettes, pin and recolor individual blobs, or roll the dice until something clicks. Copy the resulting CSS background instantly.
Mesh Gradient Generator offers a quick way to create modern, soft-blob backgrounds using overlapping radial gradients without needing heavy design software. Users can randomize palettes, pin and recolor individual nodes, and instantly copy the generated CSS code for web projects. Operating entirely in the browser for free, it provides an efficient workflow for rapid prototyping and front-end styling.
Good to know: Projects requiring complex vector export formats or multi-layered graphic editing beyond CSS background generation may require dedicated design software.
Create and export modern mesh gradient backgrounds using overlapping radial gradients for your web projects.
Open the Mesh Gradient Generator
Navigate to the tool to access the interactive canvas where you can visualize your soft-blob background design.
Randomize or select your color palette
Use the randomize feature to generate new color combinations or manually pick colors for your radial gradients.
Pin and recolor individual blobs
Select specific gradient points to pin them in place or adjust their individual colors until you achieve the desired look.
Copy the generated CSS code
Once you are satisfied with the mesh effect, click the copy button to get the CSS background code for your website.
Estimated time: PT1M
Share this tool
Visually build CSS gradients and copy the CSS output.
Build frosted-glass effects with live preview and copy-ready CSS.
Create layered SVG wave dividers for hero sections and footers.
Remove whitespace and comments to minify CSS code.
Convert colors between HEX, RGB, and HSL formats.
Upload an image and get all favicon sizes + HTML link tags.
Generate custom placeholder images with any size, color, and text.
Extract dominant colors from any image and export as HEX, RGB, HSL, CSS, or JSON.
Visually create CSS box shadows with live preview and one-click copy.
Convert text or Markdown to a Word .docx file with live preview, RTL, and page-setup options.
Draw a Secret Santa with exclusions and share a private reveal link for each person.
Make custom bingo cards from your own words — play, print, or share a link.
Convert images to video with the Ken Burns zoom/pan effect. Add music and export as WebM.
Load and compare multiple URLs side by side in resizable iframes.
Rank anything with quick 1-v-1 matchups → a full ordered list you can share.
Convert Markdown to a fully customized, RTL-ready PDF.
See your public IP address plus full location, ISP, ASN, timezone, coordinates, and more.
