# 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.

> Canonical page: https://elysiatools.com/en/tools/css-gradient-mesh-generator

- **Category:** Design

- **Keywords:** mesh gradient css, conic gradient generator, radial gradient layers, aurora background, tailwind arbitrary gradient

## Overview

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.

## Inputs

- **Palette preset** (select)
- **Custom color 1** (color)
- **Custom color 2** (color)
- **Custom color 3** (color)
- **Custom color 4** (color)
- **Number of color blobs** (number)
- **Blob layout** (select)
- **Random seed** (number)
- **Falloff (transparent stop %)** (number)
- **Blend mode** (select)
- **Add conic underlay** (checkbox)
- **Conic from-angle (deg)** (number)
- **Add film grain overlay** (checkbox)

## When to use

- Building modern hero sections, card backgrounds, or banner visuals without heavy bitmap images.
- Designing reproducible, seed-based abstract color meshes that match your brand palette.
- Exporting lightweight background layers directly into CSS or arbitrary Tailwind CSS utilities.

## How it works

- Select a curated palette preset or define up to four custom hex colors.
- Configure layout arrangements (corners, ring, scatter, or grid), blob count, random seed, and transparent falloff percentage.
- Optionally enable a conic gradient underlay, select a blend mode, and add an SVG feTurbulence grain texture overlay.
- Preview the composite design live and copy the generated multi-layer CSS rules or the Tailwind arbitrary background class.

## Use cases

- SaaS landing page hero headers that require high-impact visual depth with zero image payload.
- Component card accents and modal backgrounds tailored to dynamic dark or light UI themes.
- Aurora-style ambient lighting effects created by pairing conic gradients with screen blend modes.

## Frequently asked questions

### 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.

## Related tools

- [SVG Sprite Sheet Generator](https://elysiatools.com/en/tools/svg-sprite-generator): Merge up to 30 SVG icons into one sprite sheet (symbol or view mode) with viewBox normalization, dedup, optional currentColor stripping, sanitization, live preview and usage snippets.
- [Glassmorphism CSS Snippet Builder](https://elysiatools.com/en/tools/glassmorphism-css-snippet-builder): End-to-end frosted-glass / neumorphism CSS snippet generator: blur+saturate backdrop, tint, border, layered shadows, grain overlay, @supports fallback, -webkit- prefix, Tailwind mapping and live preview.
- [SVG Favicon Generator](https://elysiatools.com/en/tools/svg-favicon-generator): Turn an SVG or raster logo into a complete favicon pack with ICO, PNG variants, Apple touch icon, and web manifest
- [Image Watermark Diagonal](https://elysiatools.com/en/tools/image-watermark-diagonal): Add diagonal watermarks to images with customizable angle, size, opacity, and positioning across the image
- [Image Watermark Tile](https://elysiatools.com/en/tools/image-watermark-tile): Add tiled watermarks to images with customizable spacing, size, opacity, and pattern options
- [Data URI Generator](https://elysiatools.com/en/tools/data-uri-generator): Convert files into Data URIs (Base64 or percent-encoded) for inlining images, fonts, and assets directly into HTML, CSS, or Markdown
- [Biomass Pyramid & Energy Flow (10% Law)](https://elysiatools.com/en/tools/biomass-pyramid): Trophic pyramid from producer energy and transfer efficiency: per-level energy, % of base, losses, and why energy pyramids stay upright.
- [Chinese Stroke Order Decomposer](https://elysiatools.com/en/tools/chinese-stroke-order-decomposition): Decompose a Chinese character into its stroke sequence and radical structure, and render an SVG stroke-order demonstration with component coloring.

## Samples

- [SVG Samples](https://elysiatools.com/en/samples/svg-samples): Scalable Vector Graphics (SVG) samples demonstrating various SVG features and techniques
- [Tailwind CSS Samples](https://elysiatools.com/en/samples/tailwind-css): Tailwind CSS examples - Utility-first CSS framework with responsive design, components, and custom configurations
- [Web Image Processing Python Samples](https://elysiatools.com/en/samples/web-image-processing-python): Web Python image processing examples using PIL/Pillow including reading, saving, resizing, and format conversion
- [Bulma CSS Framework Samples](https://elysiatools.com/en/samples/bulma): Bulma CSS framework examples including columns, components, form controls, layout system, and modern CSS-based design patterns

## Related content

- [SVG, Favicon, and Icon Asset Workflow Tools](https://elysiatools.com/en/hubs/svg-favicon-icon-workflows): Build favicon packs, optimize SVG assets, convert icons across ICO, PNG, JPG, WebP, and SVG, and prepare web-ready image assets in one hub.
- [Audio Encoding and Format Conversion Tools](https://elysiatools.com/en/hubs/audio-convert): Compare audio format conversion, bitrate changes, sample-rate conversion, codec swaps, and export tools in one hub for delivery and archive workflows.
- [Image Format Conversion and Animated Export Tools](https://elysiatools.com/en/hubs/image-convert): Compare image format converters for JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64, and animation-friendly exports in one hub.
- [JSON Interchange and Format Translation Tools](https://elysiatools.com/en/hubs/json-convert): Compare JSON conversion tools for CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN, and related structured formats in one hub.