Skip to content
← Color Tools

CSS Mesh from Palette

Paste a 4-6 color palette and get a ready-to-use CSS mesh gradient. Starts from your colors, not from dragging points.

Related Tools

View all Color →
Mesh Gradient Generator
Try free →
Palette Generator
Try free →
Gradient Stop Optimizer
Try free →
All Color Tools
Try free →

CSS Mesh from Palette

Paste a 4-6 color palette and get a ready-to-use CSS mesh gradient. Starts from your colors, not from dragging points.

Mesh Gradients Without the Dragging

The existing Mesh Gradient Generator on this site is excellent if you want to design a mesh gradient from scratch by placing color points on a canvas and dragging them into position. The workflow is exploratory and creative, which is exactly right when you do not yet know what colors you want. The opposite workflow is also common: you already have a brand palette and you want a mesh gradient that uses those exact colors, ideally arranged in a way that looks balanced without having to drag points around to find a layout that works. CSS Mesh from Palette is the tool for that workflow. Paste or type 4 to 6 brand colors, pick a layout, and the tool emits a multi-radial-gradient CSS declaration that uses your exact colors in a perceptually balanced arrangement. The layouts are inspired by the gradient hero sections on Stripe, Linear, Vercel, and similar landing pages; six layout options cover the common shapes and the output is production-ready CSS that you can paste into a stylesheet without modification.

How the Tool Arranges Your Colors

Four layout options give different visual feels. Corners places one color in each corner with a soft falloff, which produces the classic mesh look. Diagonal stripes places colors along the main diagonal, which produces a directional gradient with mesh-style softness. Orbit places one anchor color in the center and the others around it, which is good for hero sections with a focal point. Cluster places colors close together in one region with a falloff outward, which produces a moody backgrounded glow. For each layout, the tool computes the radial-gradient stops in OKLCH so the falloff between colors is perceptually smooth rather than RGB-muddy. The aspect ratio toggle controls whether the output is sized for a wide hero, a square panel, or a tall mobile screen, which affects where the gradient peaks sit relative to the viewport. The CSS output uses standard background-image syntax with a stacked radial-gradient declaration, which renders in every browser that ships CSS gradient support, covering 99 percent of users.

Pairing With Other Tools in the Suite

The natural upstream is one of the palette generators on this site. Run the Palette Generator with a hue rule of your choice, or extract a palette from a brand image with Palette from Image, then paste the resulting four or five colors into the mesh tool. The natural downstream is the Mesh Gradient Generator if you want to manually fine-tune the layout the palette tool produced. The Gradient Stop Optimizer is useful as a follow-up if you want to add internal stops to any of the radial gradients in the mesh, though the mesh is usually smooth enough out of the box. The output is pure CSS, no images or SVG, which means it scales infinitely, loads instantly, and adapts to any viewport size without re-rendering. For a fully accessible hero section, layer a noise overlay using the existing Noise Overlay Generator on top of the mesh to mask any banding visible on OLED screens.

Frequently Asked Questions

How is this different from the existing Mesh Gradient Generator?+
The existing tool is for designing from scratch by dragging color points on a canvas; the workflow is exploratory. This tool starts from a fixed palette and arranges those colors in a balanced mesh layout automatically. Use this when you already know which colors you want; use the original when you are still exploring.
How many colors should I paste in?+
Four to six colors works best. Three colors produces a thin gradient that looks more like a regular linear gradient than a mesh; seven or more starts to crowd the layout and the mesh loses visual coherence. Five is the sweet spot for most layouts and matches the typical brand palette size.
What CSS feature does the output use?+
Stacked radial gradients with a background-image declaration. Each color in the palette becomes one radial gradient at a position determined by the layout choice, and the gradients are stacked using comma-separated values. This is standard CSS that has worked in every browser since 2011, no special support required.
Why does the tool space the colors in OKLCH?+
Spacing in OKLCH ensures the falloff between adjacent colors looks visually smooth instead of muddy in the transition zones. RGB-based mesh spacing produces gray bands where two saturated colors overlap; OKLCH-based spacing keeps the transition saturated. The output CSS does not contain OKLCH syntax; only the stop positions were computed in OKLCH.
Can I add my own positions to the mesh?+
Not directly in this tool, but the CSS output is editable: each radial-gradient stop has a position you can adjust after pasting it into your stylesheet. For interactive position editing the Mesh Gradient Generator is the better starting point. The two tools are complementary; this one is for batch generation and that one is for fine-tuning.
Does the mesh work as a body background?+
Yes, with one caveat: full-viewport mesh gradients on OLED screens can show subtle banding because each gradient renders at 8-bit precision. The fix is to overlay a noise filter using filter or a noise PNG; both options are documented in the Noise Overlay Generator tool. The mesh CSS itself is universally compatible.
How does this interact with reduced motion preferences?+
Mesh gradients are static by default; they do not animate, so they are unaffected by prefers-reduced-motion. If you add a CSS animation to the background-position to make the mesh drift over time, wrap that animation in a prefers-reduced-motion media query to disable it for users who request reduced motion.
Are mesh gradients accessible?+
Backgrounds in general do not affect screen reader output; the mesh is a decorative visual layer. The accessibility consideration is contrast: text placed on top of a mesh gradient needs to maintain a 4.5-to-1 contrast ratio against the brightest point of the mesh, not just the average. The Contrast Checker tool tests this when you sample the brightest pixel under the text.

Built by Derek Giordano · Part of Ultimate Design Tools

Privacy Policy · Terms of Service

Related Articles

Related Article
How to Check Color Contrast for WCAG Compliance
Related Article
Color Mixing & Palette Science
Related Article
Color Palettes: How to Pick, Build & Test (2026)