How do I make a mesh gradient in CSS?

CSS has no single mesh-gradient function. The common technique stacks several radial-gradient() layers, each placed with at X% Y% over a solid background-color, and fades every layer to transparent. Choose Blur Mesh in this generator, set 3 to 6 colors, move each color's position slider to shift its blob, and use the softness slider to control how far each color spreads.

What is the difference between linear, radial and conic gradients?

linear-gradient() blends colors along a straight line at an angle, radial-gradient() spreads outward from a center point, and conic-gradient() sweeps colors around a center like a color wheel or pie chart. Use linear for backgrounds and buttons, radial for glows and vignettes, and conic for charts, spectrums and metallic effects.

How many color stops can a CSS gradient have, and how do I add opacity?

CSS allows many color stops, and this generator supports 3 to 6 so the output stays readable. Give a stop an opacity below 100% and the tool writes it as rgba(), for example rgba(99,102,241,0.5). You can also fade to the keyword transparent to build a transparent gradient overlay.

Do large CSS gradients hurt performance or Core Web Vitals?

A static gradient is cheap: the browser paints it without downloading an image, which helps LCP compared with a large background photo. Cost appears when you animate background properties, stack many full-screen layers or add big blur filters, because each frame is repainted. Animate transform or opacity on a separate layer instead, as the performance guide above explains.

How do I use a CSS gradient in Tailwind CSS?

Use an arbitrary value with underscores in place of spaces, for example bg-[linear-gradient(135deg,#6366f1_0%,#ec4899_100%)], which is exactly what the Tailwind output box generates. For a Blur Mesh gradient, add bg-[#hex] for the base color and bg-[image:...] for the layered gradients. For reusable gradients, add them to theme.extend.backgroundImage in your Tailwind config.

CSS Mesh & Multi-Gradient Generator

Save on Google

Free online CSS gradient generator for linear, radial, conic and blur mesh gradients. Build a multi color gradient with up to 6 stops, opacity and a live preview, then copy the CSS or Tailwind class. Everything runs in your browser. Nothing is stored or uploaded.

Inputs

Gradient type

Angle (Linear and Conic)

135deg

Mesh softness (Blur Mesh) 60%

In Blur Mesh mode each color becomes a soft blob, and its position slider moves the blob left to right.

Color stops (3 to 6)

Drag the grip to reorder colors, or use Up and Down.

Output

Live preview

CSS output

Tailwind CSS class

Share this gradient

This link opens the generator with your exact colors and settings. It updates every time you change something.

https://www.thinkforu.org/p/css-gradient-generator.html

Open Link

Share with developers

Related tools

Tool	What it does
CSS clamp() Calculator	Fluid typography and spacing values with clamp().
PX to REM / EM Converter	Convert pixel values to rem and em.
CSS Glassmorphism Generator	Frosted-glass blur and transparency effects.
CSS Neumorphism (Soft UI) Generator	Soft extruded shadows for UI elements.
CSS Box Shadow & Glow Stacker	Layer multiple shadows and glows.
CSS Grid Layout Builder	Design grids visually and copy the CSS.

What is a CSS gradient?

A CSS gradient is an image that the browser draws for you, so it needs no file download. linear-gradient() blends colors along a line, radial-gradient() spreads them outward from a point, and conic-gradient() sweeps them around a center. You can use any of them anywhere CSS accepts an image, most often as a CSS gradient background.

A mesh gradient is the soft, multi-color blend popular in SaaS and Web3 landing pages. CSS has no single function for it, so a mesh gradient generator stacks several radial-gradient() layers over a base color and fades each one to transparent. That is what the Blur Mesh mode here builds, with a softness slider to control the spread.

Every stop can carry opacity, so you can build a gradient with opacity or a transparent gradient overlay: the tool writes semi-transparent stops as rgba(). The CSS output also includes a solid-color fallback for legacy browsers, and the Tailwind box gives you the same gradient as an arbitrary-value class.

How to use this gradient generator

Pick a gradient type: Linear, Radial, Conic or Blur Mesh.
Set the angle with the wheel or slider (Linear and Conic), or the softness slider (Blur Mesh).
Edit each color stop: use the color picker or type a hex code, then set the opacity and position. Add up to 6 stops.
Drag the grip to reorder colors, then test different aspect ratios and open the fullscreen preview.
Press Copy CSS or Copy Tailwind class, or use Open Link and the share buttons to send the exact gradient to a teammate.

Performance guide: GPU rasterization and paint optimization

Gradients are cheap when they are static and expensive when they are animated or stacked at full-screen size. Use this checklist for large gradients and mesh backgrounds.

#	Tip	Why it matters	What to do
1	Keep the gradient static	A gradient is painted once and cached as part of the layer. Changing background colors or background-position forces a repaint on every frame.	Set the gradient once. To add motion, animate a different property on a separate layer.
2	Animate a layer, not the gradient	transform and opacity can be handled by the compositor on the GPU without repainting the gradient itself.	Put a large gradient on a pseudo-element and move or fade it with transform and opacity.
3	Limit stacked radial layers	Each radial-gradient layer is rasterized and blended, so many full-screen layers raise paint cost on weaker phones.	Use 3 to 5 layers for a mesh gradient and avoid animating them.
4	Avoid large blur filters	filter: blur() on big areas is one of the most expensive effects to render and can cause jank while scrolling.	Use soft radial stops (the Softness slider) for the blur look instead of filter: blur().
5	Limit the painted area	The bigger the painted area, the more pixels the browser must fill. background-attachment: fixed can be slow, and some mobile browsers ignore it.	Put the gradient on a hero section or a fixed-height wrapper instead of the whole page, and skip background-attachment: fixed on mobile.
6	Use will-change sparingly	Promoting a layer to its own GPU texture uses memory, and doing it everywhere slows the page down.	Add will-change: transform only to the layer you animate, remove it afterwards, and check Chrome DevTools > Rendering > Paint flashing.

189 SaaS, Web3 and AI gradient presets

Every base palette comes with Soft, Dark, Radial or Mesh variants. Search by name, color or style, filter by category or variant, then click Apply to load a preset into the generator above, or Copy CSS to use it as it is.

Search presets

Showing 189 of 189 presets

Name	Category and type	Colors
Indigo Bloom	SaaS, Linear	`#6366f1 #8b5cf6`
Indigo Bloom Soft	SaaS, Linear	`#b9baf9 #cbb6fb`
Indigo Bloom Dark	SaaS, Linear	`#363885 #4c3387`
Indigo Bloom Radial	SaaS, Radial	`#6366f1 #8b5cf6`
Violet Sunrise	SaaS, Linear	`#7c3aed #db2777 #f59e0b`
Violet Sunrise Soft	SaaS, Linear	`#c4a6f7 #ef9ec2 #fad391`
Violet Sunrise Dark	SaaS, Linear	`#442082 #781541 #875706`
Violet Sunrise Mesh	SaaS, Mesh	`#7c3aed #db2777 #f59e0b`
Ocean Dashboard	SaaS, Linear	`#0ea5e9 #2563eb`
Ocean Dashboard Soft	SaaS, Linear	`#93d6f5 #9db9f6`
Ocean Dashboard Dark	SaaS, Linear	`#085b80 #143681`
Ocean Dashboard Radial	SaaS, Radial	`#0ea5e9 #2563eb`
Mint Growth	SaaS, Linear	`#10b981 #06b6d4`
Mint Growth Soft	SaaS, Linear	`#93e0c6 #8fdeec`
Mint Growth Dark	SaaS, Linear	`#096647 #036475`
Mint Growth Radial	SaaS, Radial	`#10b981 #06b6d4`
Slate Pro	SaaS, Linear	`#0f172a #334155`
Slate Pro Soft	SaaS, Linear	`#93979f #a3aab2`
Slate Pro Dark	SaaS, Linear	`#080d17 #1c242f`
Slate Pro Radial	SaaS, Radial	`#0f172a #334155`
Cloud Blue	SaaS, Linear	`#e0f2fe #bae6fd #7dd3fc`
Cloud Blue Dark	SaaS, Linear	`#7b858c #667e8b #45748b`
Cloud Blue Mesh	SaaS, Mesh	`#e0f2fe #bae6fd #7dd3fc`
Sunset CTA	SaaS, Linear	`#f97316 #ef4444`
Sunset CTA Soft	SaaS, Linear	`#fcc096 #f8abab`
Sunset CTA Dark	SaaS, Linear	`#893f0c #832525`
Sunset CTA Radial	SaaS, Radial	`#f97316 #ef4444`
Peach Cream	SaaS, Linear	`#fde68a #fca5a5 #f9a8d4`
Peach Cream Soft	SaaS, Linear	`#fef4ca #fed6d6 #fcd8ec`
Peach Cream Dark	SaaS, Linear	`#8b7e4c #8b5b5b #895c75`
Peach Cream Mesh	SaaS, Mesh	`#fde68a #fca5a5 #f9a8d4`
Lime Fresh	SaaS, Linear	`#a3e635 #22c55e`
Lime Fresh Soft	SaaS, Linear	`#d6f4a4 #9ce5b7`
Lime Fresh Dark	SaaS, Linear	`#5a7e1d #136c34`
Lime Fresh Radial	SaaS, Radial	`#a3e635 #22c55e`
Teal Trust	SaaS, Linear	`#0d9488 #0ea5e9`
Teal Trust Soft	SaaS, Linear	`#92cfc9 #93d6f5`
Teal Trust Dark	SaaS, Linear	`#07514b #085b80`
Teal Trust Radial	SaaS, Radial	`#0d9488 #0ea5e9`
Rose Gold	SaaS, Linear	`#fb7185 #f59e0b`
Rose Gold Soft	SaaS, Linear	`#fdbfc8 #fad391`
Rose Gold Dark	SaaS, Linear	`#8a3e49 #875706`
Rose Gold Radial	SaaS, Radial	`#fb7185 #f59e0b`
Royal Navy	SaaS, Linear	`#1e3a8a #3b82f6 #93c5fd`
Royal Navy Soft	SaaS, Linear	`#9aa6ca #a7c7fb #cee5fe`
Royal Navy Dark	SaaS, Linear	`#10204c #204887 #516c8b`
Royal Navy Mesh	SaaS, Mesh	`#1e3a8a #3b82f6 #93c5fd`
Berry Smoothie	SaaS, Linear	`#be185d #7e22ce #4338ca`
Berry Smoothie Soft	SaaS, Linear	`#e297b6 #c59ce9 #aaa5e7`
Berry Smoothie Dark	SaaS, Linear	`#680d33 #451371 #251f6f`
Berry Smoothie Mesh	SaaS, Mesh	`#be185d #7e22ce #4338ca`
Aqua Mist	SaaS, Radial	`#cffafe #a5f3fc #67e8f9`
Aqua Mist Dark	SaaS, Radial	`#728a8c #5b868b #398089`
Warm Paper	SaaS, Linear	`#fff7ed #ffedd5 #fed7aa`
Warm Paper Dark	SaaS, Linear	`#8c8882 #8c8275 #8c765e`
Warm Paper Mesh	SaaS, Mesh	`#fff7ed #ffedd5 #fed7aa`
Electric Lime	SaaS, Linear	`#bef264 #4ade80 #2dd4bf`
Electric Lime Soft	SaaS, Linear	`#e2f9b9 #aef0c6 #a0ece2`
Electric Lime Dark	SaaS, Linear	`#688537 #297a46 #197569`
Electric Lime Mesh	SaaS, Mesh	`#bef264 #4ade80 #2dd4bf`
Calm Lavender	SaaS, Radial	`#ede9fe #ddd6fe #c4b5fd`
Calm Lavender Soft	SaaS, Radial	`#f7f5ff #f0edff #e4defe`
Calm Lavender Dark	SaaS, Radial	`#82808c #7a768c #6c648b`
Graphite Blue	SaaS, Linear	`#111827 #1e40af`
Graphite Blue Soft	SaaS, Linear	`#94979e #9aa9db`
Graphite Blue Dark	SaaS, Linear	`#090d15 #102360`
Graphite Blue Radial	SaaS, Radial	`#111827 #1e40af`
Neon Chain	Web3, Linear	`#00f5a0 #00d9f5`
Neon Chain Soft	Web3, Linear	`#8cfad4 #8ceefa`
Neon Chain Dark	Web3, Linear	`#008758 #007787`
Neon Chain Radial	Web3, Radial	`#00f5a0 #00d9f5`
Ether Glow	Web3, Linear	`#627eea #7c3aed`
Ether Glow Soft	Web3, Linear	`#b8c5f6 #c4a6f7`
Ether Glow Dark	Web3, Linear	`#364581 #442082`
Ether Glow Radial	Web3, Radial	`#627eea #7c3aed`
Solar Flare	Web3, Linear	`#f7931a #ffd200`
Solar Flare Soft	Web3, Linear	`#fbce98 #ffeb8c`
Solar Flare Dark	Web3, Linear	`#88510e #8c7400`
Solar Flare Radial	Web3, Radial	`#f7931a #ffd200`
Cyber Purple	Web3, Linear	`#9333ea #3b0764`
Cyber Purple Soft	Web3, Linear	`#cea3f6 #a78fb9`
Cyber Purple Dark	Web3, Linear	`#511c81 #200437`
Cyber Purple Radial	Web3, Radial	`#9333ea #3b0764`
Matrix Night	Web3, Linear	`#022c22 #064e3b #10b981`
Matrix Night Soft	Web3, Linear	`#8da09c #8fafa7 #93e0c6`
Matrix Night Dark	Web3, Linear	`#011813 #032b20 #096647`
Matrix Night Mesh	Web3, Mesh	`#022c22 #064e3b #10b981`
Token Pink	Web3, Linear	`#ff0080 #7928ca`
Token Pink Soft	Web3, Linear	`#ff8cc6 #c39ee7`
Token Pink Dark	Web3, Linear	`#8c0046 #43166f`
Token Pink Radial	Web3, Radial	`#ff0080 #7928ca`
Hologram Sweep	Web3, Conic	`#00f5ff #a855f7 #ff4da6 #00f5ff`
Hologram Sweep Soft	Web3, Conic	`#8cfaff #d8b2fb #ffafd7 #8cfaff`
Hologram Sweep Dark	Web3, Conic	`#00878c #5c2f88 #8c2a5b #00878c`
DeFi Aurora	Web3, Mesh	`#7c3aed #06b6d4 #22c55e #f472b6`
DeFi Aurora Soft	Web3, Mesh	`#c4a6f7 #8fdeec #9ce5b7 #fac0de`
DeFi Aurora Dark	Web3, Mesh	`#442082 #036475 #136c34 #863f64`
NFT Candy	Web3, Linear	`#f472b6 #a78bfa #60a5fa`
NFT Candy Soft	Web3, Linear	`#fac0de #d7cbfd #b7d6fd`
NFT Candy Dark	Web3, Linear	`#863f64 #5c4c8a #355b8a`
NFT Candy Mesh	Web3, Mesh	`#f472b6 #a78bfa #60a5fa`
Blockchain Steel	Web3, Linear	`#0b1220 #1e293b #475569`
Blockchain Steel Soft	Web3, Linear	`#91949b #9a9fa7 #acb2bc`
Blockchain Steel Dark	Web3, Linear	`#060a12 #101720 #272f3a`
Blockchain Steel Mesh	Web3, Mesh	`#0b1220 #1e293b #475569`
Gas Fee Orange	Web3, Linear	`#ff6b00 #ff2d55`
Gas Fee Orange Soft	Web3, Linear	`#ffbc8c #ffa0b2`
Gas Fee Orange Dark	Web3, Linear	`#8c3b00 #8c192f`
Gas Fee Orange Radial	Web3, Radial	`#ff6b00 #ff2d55`
Metaverse Ultra	Web3, Linear	`#2e1065 #7c3aed #22d3ee`
Metaverse Ultra Soft	Web3, Linear	`#a193ba #c4a6f7 #9cebf7`
Metaverse Ultra Dark	Web3, Linear	`#190938 #442082 #137483`
Metaverse Ultra Mesh	Web3, Mesh	`#2e1065 #7c3aed #22d3ee`
Staking Gold	Web3, Linear	`#fbbf24 #b45309`
Staking Gold Soft	Web3, Linear	`#fde29c #ddb290`
Staking Gold Dark	Web3, Linear	`#8a6914 #632e05`
Staking Gold Radial	Web3, Radial	`#fbbf24 #b45309`
Layer Two Cyan	Web3, Linear	`#22d3ee #6366f1`
Layer Two Cyan Soft	Web3, Linear	`#9cebf7 #b9baf9`
Layer Two Cyan Dark	Web3, Linear	`#137483 #363885`
Layer Two Cyan Radial	Web3, Radial	`#22d3ee #6366f1`
Dark DAO	Web3, Radial	`#1e1b4b #0f172a #020617`
Dark DAO Soft	Web3, Radial	`#9a98ae #93979f #8d8f97`
Satoshi Sunrise	Web3, Linear	`#f7931a #fde68a`
Satoshi Sunrise Soft	Web3, Linear	`#fbce98 #fef4ca`
Satoshi Sunrise Dark	Web3, Linear	`#88510e #8b7e4c`
Satoshi Sunrise Radial	Web3, Radial	`#f7931a #fde68a`
Zero Knowledge	Web3, Mesh	`#0f172a #6366f1 #14b8a6 #a855f7`
Zero Knowledge Soft	Web3, Mesh	`#93979f #b9baf9 #95dfd7 #d8b2fb`
Zero Knowledge Dark	Web3, Mesh	`#080d17 #363885 #0b655b #5c2f88`
AI Neural	AI & Fintech, Linear	`#4f46e5 #06b6d4`
AI Neural Soft	AI & Fintech, Linear	`#b0acf3 #8fdeec`
AI Neural Dark	AI & Fintech, Linear	`#2b267e #036475`
AI Neural Radial	AI & Fintech, Radial	`#4f46e5 #06b6d4`
Prompt Spark	AI & Fintech, Conic	`#f472b6 #8b5cf6 #38bdf8 #f472b6`
Prompt Spark Soft	AI & Fintech, Conic	`#fac0de #cbb6fb #a5e1fc #fac0de`
Prompt Spark Dark	AI & Fintech, Conic	`#863f64 #4c3387 #1f6888 #863f64`
Fintech Green	AI & Fintech, Linear	`#059669 #34d399`
Fintech Green Soft	AI & Fintech, Linear	`#8ed0bc #a4ebd1`
Fintech Green Dark	AI & Fintech, Linear	`#03523a #1d7454`
Fintech Green Radial	AI & Fintech, Radial	`#059669 #34d399`
Bank Blue	AI & Fintech, Linear	`#1d4ed8 #60a5fa`
Bank Blue Soft	AI & Fintech, Linear	`#99afed #b7d6fd`
Bank Blue Dark	AI & Fintech, Linear	`#102b77 #355b8a`
Bank Blue Radial	AI & Fintech, Radial	`#1d4ed8 #60a5fa`
Vault Black	AI & Fintech, Linear	`#000000 #111827`
Vault Black Soft	AI & Fintech, Linear	`#8c8c8c #94979e`
Vault Black Radial	AI & Fintech, Radial	`#000000 #111827`
Ledger Mint	AI & Fintech, Linear	`#6ee7b7 #3b82f6`
Ledger Mint Soft	AI & Fintech, Linear	`#bef4df #a7c7fb`
Ledger Mint Dark	AI & Fintech, Linear	`#3c7f65 #204887`
Ledger Mint Radial	AI & Fintech, Radial	`#6ee7b7 #3b82f6`
Quant Violet	AI & Fintech, Linear	`#312e81 #7c3aed`
Quant Violet Soft	AI & Fintech, Linear	`#a2a1c6 #c4a6f7`
Quant Violet Dark	AI & Fintech, Linear	`#1b1947 #442082`
Quant Violet Radial	AI & Fintech, Radial	`#312e81 #7c3aed`
Crypto Wallet	AI & Fintech, Mesh	`#111827 #7c3aed #22d3ee #f43f5e`
Crypto Wallet Soft	AI & Fintech, Mesh	`#94979e #c4a6f7 #9cebf7 #faa9b7`
Crypto Wallet Dark	AI & Fintech, Mesh	`#090d15 #442082 #137483 #862334`
Midnight Aurora	AI & Fintech, Linear	`#0f2027 #203a43 #2c5364`
Midnight Aurora Soft	AI & Fintech, Linear	`#939b9e #9ba6aa #a0b2b9`
Midnight Aurora Dark	AI & Fintech, Linear	`#081215 #122025 #182e37`
Midnight Aurora Mesh	AI & Fintech, Mesh	`#0f2027 #203a43 #2c5364`
Deep Space	AI & Fintech, Radial	`#312e81 #1e1b4b #020617`
Deep Space Soft	AI & Fintech, Radial	`#a2a1c6 #9a98ae #8d8f97`
Premium Gold	AI & Fintech, Linear	`#1c1917 #78350f #fbbf24`
Premium Gold Soft	AI & Fintech, Linear	`#999897 #c2a493 #fde29c`
Premium Gold Dark	AI & Fintech, Linear	`#0f0e0d #421d08 #8a6914`
Premium Gold Mesh	AI & Fintech, Mesh	`#1c1917 #78350f #fbbf24`
Invoice Orange	AI & Fintech, Linear	`#fb923c #f97316`
Invoice Orange Soft	AI & Fintech, Linear	`#fdcea7 #fcc096`
Invoice Orange Dark	AI & Fintech, Linear	`#8a5021 #893f0c`
Invoice Orange Radial	AI & Fintech, Radial	`#fb923c #f97316`
Glass Frost	AI & Fintech, Linear	`#f8fafc #e2e8f0 #cbd5e1`
Glass Frost Dark	AI & Fintech, Linear	`#888a8b #7c8084 #70757c`
Glass Frost Mesh	AI & Fintech, Mesh	`#f8fafc #e2e8f0 #cbd5e1`
Terminal Green	AI & Fintech, Linear	`#022c22 #14532d #22c55e`
Terminal Green Soft	AI & Fintech, Linear	`#8da09c #95b2a0 #9ce5b7`
Terminal Green Dark	AI & Fintech, Linear	`#011813 #0b2e19 #136c34`
Terminal Green Mesh	AI & Fintech, Mesh	`#022c22 #14532d #22c55e`
Spectrum Pro	AI & Fintech, Conic	`#ef4444 #f59e0b #22c55e #3b82f6 #a855f7 #ef4444`
Spectrum Pro Soft	AI & Fintech, Conic	`#f8abab #fad391 #9ce5b7 #a7c7fb #d8b2fb #f8abab`
Spectrum Pro Dark	AI & Fintech, Conic	`#832525 #875706 #136c34 #204887 #5c2f88 #832525`
Soft Pastel Mesh	AI & Fintech, Mesh	`#fbcfe8 #bae6fd #ddd6fe #bbf7d0`
Soft Pastel Mesh Dark	AI & Fintech, Mesh	`#8a7280 #667e8b #7a768c #678872`
Sky Gradient	AI & Fintech, Linear	`#38bdf8 #818cf8 #c084fc`
Sky Gradient Soft	AI & Fintech, Linear	`#a5e1fc #c6cbfc #e3c8fe`
Sky Gradient Dark	AI & Fintech, Linear	`#1f6888 #474d88 #6a498b`
Sky Gradient Mesh	AI & Fintech, Mesh	`#38bdf8 #818cf8 #c084fc`

Frequently asked questions

#	Question	Answer
1	How do I make a mesh gradient in CSS?	CSS has no single mesh-gradient function. The common technique stacks several radial-gradient() layers, each placed with at X% Y% over a solid background-color, and fades every layer to transparent. Choose Blur Mesh in this generator, set 3 to 6 colors, move each color's position slider to shift its blob, and use the softness slider to control how far each color spreads.
2	What is the difference between linear, radial and conic gradients?	linear-gradient() blends colors along a straight line at an angle, radial-gradient() spreads outward from a center point, and conic-gradient() sweeps colors around a center like a color wheel or pie chart. Use linear for backgrounds and buttons, radial for glows and vignettes, and conic for charts, spectrums and metallic effects.
3	How many color stops can a CSS gradient have, and how do I add opacity?	CSS allows many color stops, and this generator supports 3 to 6 so the output stays readable. Give a stop an opacity below 100% and the tool writes it as rgba(), for example rgba(99,102,241,0.5). You can also fade to the keyword transparent to build a transparent gradient overlay.
4	Do large CSS gradients hurt performance or Core Web Vitals?	A static gradient is cheap: the browser paints it without downloading an image, which helps LCP compared with a large background photo. Cost appears when you animate background properties, stack many full-screen layers or add big blur filters, because each frame is repainted. Animate transform or opacity on a separate layer instead, as the performance guide above explains.
5	How do I use a CSS gradient in Tailwind CSS?	Use an arbitrary value with underscores in place of spaces, for example bg-[linear-gradient(135deg,#6366f1_0%,#ec4899_100%)], which is exactly what the Tailwind output box generates. For a Blur Mesh gradient, add bg-[#hex] for the base color and bg-[image:...] for the layered gradients. For reusable gradients, add them to theme.extend.backgroundImage in your Tailwind config.

CSS Mesh & Multi-Gradient Generator