Why does the generator use 8-digit hex colors instead of the transparent keyword?

CSS interpolation toward the generic transparent keyword fades toward transparent black (rgba(0,0,0,0)), causing a muddy gray halo. Using same-hue alpha (#RRGGBB00) ensures a clean, vibrant fade.

How does the random seed parameter work?

The generator uses a deterministic mulberry32 PRNG algorithm, ensuring that reusing the same seed number always yields identical blob coordinates and layouts.

What does the falloff percentage control?

Falloff defines the stop position where the radial blob reaches 0% opacity. Lower values (35–50%) create distinct blobs, while higher values (80–100%) create soft, diffuse washes.

How is the film grain effect rendered in CSS?

Film grain is applied as an inline SVG data URI using the feTurbulence filter at 0.07 opacity, layered with mix-blend-mode: overlay.

How do I use the exported Tailwind snippet in my project?

Paste the provided arbitrary background utility class (bg-[...]) directly onto your HTML element; spaces in the CSS gradients are automatically formatted with underscores.

Elysia Tools

Navigation

Design

CSS Gradient Mesh Generator (Conic + Radial Blend)

Layered radial-gradient "mesh" backgrounds with conic underlays, blend modes, grain and seeded layouts — live preview, CSS and Tailwind export.

Details

What this tool helps you do

Generates the mesh technique used by meshgradient/hypercolor/csshero-class tools: N radial-gradients fading color → #RRGGBB00 (same-hue transparent — avoids the gray ring of the transparent keyword) at seeded at x% y% positions over a background-color base; first background-image layer paints topmost. Optional conic-gradient(from Xdeg at 50% 50%, …) underlay for aurora looks; background-blend-mode list matches layer order (multiply inks, screen glows, overlay saturates, soft-light softens, hue/difference go psychedelic). Grain is an inline feTurbulence SVG data-URI at 0.07 opacity with mix-blend-mode: overlay. Falloff 35–50% = hard blobs, 50–70% = classic mesh, 80–100% = soft wash. Layouts (corners/ring/scatter/grid) are seeded via mulberry32 so every seed is reproducible. Tailwind export collapses the multi-layer image into one arbitrary value with underscores for spaces.

Execution

Run this tool

Fill in the form, run the tool, and review the result in one place.

Prepared example runs

Click an example to fill the form automatically. File inputs still need an upload.

2 examples

Cosmic hero background — the default mesh

Four blobs (violet, pink, cyan, mint) in the corner layout over a near-black base, 60% falloff, normal blending — the conic.style-style signature look, ready to paste.

<section class="cgm">300px live mesh preview · .gradient-mesh CSS block with 4 radial layers · Tailwind bg-[…] class · layer chips + palette</section>

Ember glow — scatter, conic underlay, grain, screen blending

The ember palette scattered from seed 777 over its near-black base with a conic underlay from 45°, screen blending for glowing overlaps (screen only shines on dark bases — the washout hint warns about the reverse combo) and film grain — the full polish stack in one preset.

<section class="cgm">ember scatter mesh preview glowing over #1c0a0a · 5 radial layers + conic underlay = 6 layers · grain ::after pseudo-element in the CSS · Tailwind class</section>

Inputs

Options are grouped so long tools stay easier to scan.

13 options

SettingsAdjust formats, ranges, numbers, and modes.11

Palette presetselectOptionalCustom color 1colorOptionalCustom color 2colorOptionalCustom color 3colorOptionalCustom color 4colorOptionalNumber of color blobsnumberOptionalBlob layoutselectOptionalRandom seednumberOptionalFalloff (transparent stop %)numberOptionalBlend modeselectOptionalConic from-angle (deg)numberOptional

TogglesEnable or disable optional behavior.2

Add conic underlaycheckboxOptionalEnabled when checkedAdd film grain overlaycheckboxOptionalEnabled when checked

Result

Ready for a run

Run the tool to preview files, text, structured data, or streamed output here.

Samples

CSS Gradient Mesh Generator (Conic + Radial Blend)

What this tool helps you do

Run this tool

Prepared example runs

Inputs

Result

Examples that match this tool

Continue with connected tools and hubs

Prepared example runs

Inputs

Result

Learn when to use this tool, what it supports, and how real users apply it.

Key facts

Overview

When to use

How it works

Use cases

Examples

1. Cosmic SaaS Hero Section

2. Ember Glow Aurora Card

FAQ

SVG Samples

Tailwind CSS Samples

Web Image Processing Python Samples

Bulma CSS Framework Samples

SVG Sprite Sheet Generator

Glassmorphism CSS Snippet Builder

SVG Favicon Generator

Image Watermark Diagonal

SVG, Favicon, and Icon Asset Workflow Tools

Audio Encoding and Format Conversion Tools

Image Format Conversion and Animated Export Tools

JSON Interchange and Format Translation Tools