Gradient gallery

Multicolor Gradient: CSS gradients, backgrounds, and downloadable images

Multicolor gradients are useful when a design needs movement, energy, or a more imaginative brand signal. This collection starts with Gradient Crafter presets, then adds vivid linear and radial palettes that still open cleanly in the editor.

Create your own gradient Browse all gradients

Multicolor Gradient preview gradient background

Ready-to-use multicolor gradient examples

Use multicolor gradients for hero backgrounds, creator tools, launch graphics, playful dashboards, and AI product surfaces. Keep text readable with a dark overlay or place copy on the calmer side of the gradient.

Chrome Tide gradient background using #111827, #60a5fa, #e5e7eb

Chrome Tide

#111827 · #60a5fa · #e5e7eb

linear-gradient(128deg, #111827 12%, #60a5fa 50%, #e5e7eb 88%)

Open in Gradient Crafter Download image

Matcha Clay gradient background using #355e3b, #c08457, #f2e7d5

Matcha Clay

#355e3b · #c08457 · #f2e7d5

linear-gradient(145deg, #355e3b 13%, #c08457 50%, #f2e7d5 87%)

Open in Gradient Crafter Download image

Butter Tomato gradient background using #facc15, #fb923c, #ef4444

Butter Tomato

#facc15 · #fb923c · #ef4444

linear-gradient(118deg, #facc15 14%, #fb923c 50%, #ef4444 86%)

Open in Gradient Crafter Download image

Petrol Jelly gradient background using #052e3d, #0ea5e9, #67e8f9

Petrol Jelly

#052e3d · #0ea5e9 · #67e8f9

linear-gradient(132deg, #052e3d 12%, #0ea5e9 50%, #67e8f9 88%)

Open in Gradient Crafter Download image

Olive Citron gradient background using #3f6212, #84cc16, #fef08a

Olive Citron

#3f6212 · #84cc16 · #fef08a

linear-gradient(105deg, #3f6212 17%, #84cc16 50%, #fef08a 83%)

Open in Gradient Crafter Download image

Cobalt Clay gradient background using #1d4ed8, #f97316, #fed7aa

Cobalt Clay

#1d4ed8 · #f97316 · #fed7aa

linear-gradient(140deg, #1d4ed8 12%, #f97316 50%, #fed7aa 88%)

Open in Gradient Crafter Download image

Dusty Rose Glass gradient background using #9f1239, #fda4af, #fff1f2

Dusty Rose Glass

#9f1239 · #fda4af · #fff1f2

linear-gradient(126deg, #9f1239 12%, #fda4af 50%, #fff1f2 88%)

Open in Gradient Crafter Download image

Mineral Blue gradient background using #1e3a8a, #38bdf8, #ccfbf1

Mineral Blue

#1e3a8a · #38bdf8 · #ccfbf1

linear-gradient(152deg, #1e3a8a 14%, #38bdf8 50%, #ccfbf1 86%)

Open in Gradient Crafter Download image

Cashmere Kitchen gradient background using #6b5f4b, #b7a98b, #f3eadb

Cashmere Kitchen

#6b5f4b · #b7a98b · #f3eadb

linear-gradient(116deg, #6b5f4b 14%, #b7a98b 50%, #f3eadb 86%)

Open in Gradient Crafter Download image

Electric Orchid gradient background using #7c3aed, #ec4899, #fb7185

Electric Orchid

#7c3aed · #ec4899 · #fb7185

linear-gradient(135deg, #7c3aed 12%, #ec4899 50%, #fb7185 88%)

Open in Gradient Crafter Download image

Oat Milk Peach gradient background using #f4d6b1, #fb923c, #fff7ed

Oat Milk Peach

#f4d6b1 · #fb923c · #fff7ed

linear-gradient(120deg, #f4d6b1 13%, #fb923c 50%, #fff7ed 87%)

Open in Gradient Crafter Download image

Graphite Aurora gradient background using #111827, #22d3ee, #a78bfa

Graphite Aurora

#111827 · #22d3ee · #a78bfa

radial-gradient(circle at 44% 34%, #22d3ee 0%, transparent 44%), radial-gradient(circle at 16% 78%, #111827 0%, transparent 44%), radial-gradient(circle at 78% 22%, #a78bfa 0%, transparent 44%), linear-gradient(135deg, #111827, #07070d)

Open in Gradient Crafter Download image

Moss Limewash gradient background using #365314, #86efac, #f7fee7

Moss Limewash

#365314 · #86efac · #f7fee7

linear-gradient(148deg, #365314 13%, #86efac 50%, #f7fee7 87%)

Open in Gradient Crafter Download image

Plum Stainless gradient background using #581c87, #a855f7, #d1d5db

Plum Stainless

#581c87 · #a855f7 · #d1d5db

linear-gradient(130deg, #581c87 12%, #a855f7 50%, #d1d5db 88%)

Open in Gradient Crafter Download image

Cranberry Smoke gradient background using #4a0f1f, #be123c, #64748b

Cranberry Smoke

#4a0f1f · #be123c · #64748b

linear-gradient(142deg, #4a0f1f 12%, #be123c 50%, #64748b 88%)

Open in Gradient Crafter Download image

Sage Warm White gradient background using #4d7c0f, #a3b18a, #fafaf0

Sage Warm White

#4d7c0f · #a3b18a · #fafaf0

linear-gradient(112deg, #4d7c0f 15%, #a3b18a 50%, #fafaf0 85%)

Open in Gradient Crafter Download image

Neon Coral UI gradient background using #ff4d14, #f43f5e, #22d3ee

Neon Coral UI

#ff4d14 · #f43f5e · #22d3ee

linear-gradient(135deg, #ff4d14 12%, #f43f5e 50%, #22d3ee 88%)

Open in Gradient Crafter Download image

Deep Sea Mint gradient background using #020617, #0f766e, #99f6e4

Deep Sea Mint

#020617 · #0f766e · #99f6e4

radial-gradient(circle at 46% 48%, #0f766e 0%, transparent 44%), radial-gradient(circle at 76% 20%, #99f6e4 0%, transparent 44%), radial-gradient(circle at 16% 82%, #020617 0%, transparent 44%), linear-gradient(135deg, #020617, #07070d)

Open in Gradient Crafter Download image

Sunset Copper gradient background using #7c2d12, #f97316, #fde68a

Sunset Copper

#7c2d12 · #f97316 · #fde68a

linear-gradient(125deg, #7c2d12 13%, #f97316 50%, #fde68a 87%)

Open in Gradient Crafter Download image

Blueberry Chartreuse gradient background using #312e81, #3b82f6, #d9f99d

Blueberry Chartreuse

#312e81 · #3b82f6 · #d9f99d

linear-gradient(136deg, #312e81 12%, #3b82f6 50%, #d9f99d 88%)

Open in Gradient Crafter Download image

Prismatic Studio gradient background using #020617, #7c3aed, #22d3ee, #facc15

Prismatic Studio

#020617 · #7c3aed · #22d3ee · #facc15

linear-gradient(128deg, #020617 42%, #7c3aed 45%, #22d3ee 50%, #facc15 57%)

Open in Gradient Crafter Download image

Tropical Signal gradient background using #0f766e, #22c55e, #facc15, #fb7185

Tropical Signal

#0f766e · #22c55e · #facc15 · #fb7185

linear-gradient(118deg, #0f766e 34%, #22c55e 44%, #facc15 53%, #fb7185 63%)

Open in Gradient Crafter Download image

Galaxy Sherbet gradient background using #120024, #6d28d9, #ec4899, #fef3c7

Galaxy Sherbet

#120024 · #6d28d9 · #ec4899 · #fef3c7

radial-gradient(circle at 42% 46%, #6d28d9 0%, transparent 44%), radial-gradient(circle at 70% 26%, #ec4899 0%, transparent 44%), radial-gradient(circle at 88% 14%, #fef3c7 0%, transparent 44%), radial-gradient(circle at 16% 82%, #120024 0%, transparent 44%), linear-gradient(135deg, #120024, #07070d)

Open in Gradient Crafter Download image

Aurora Market gradient background using #052e16, #0ea5e9, #a78bfa, #f0abfc

Aurora Market

#052e16 · #0ea5e9 · #a78bfa · #f0abfc

linear-gradient(132deg, #052e16 42%, #0ea5e9 44%, #a78bfa 49%, #f0abfc 55%)

Open in Gradient Crafter Download image

Candy Console gradient background using #831843, #db2777, #f97316, #bae6fd

Candy Console

#831843 · #db2777 · #f97316 · #bae6fd

radial-gradient(circle at 18% 76%, #831843 0%, transparent 44%), radial-gradient(circle at 46% 46%, #db2777 0%, transparent 44%), radial-gradient(circle at 70% 28%, #f97316 0%, transparent 44%), radial-gradient(circle at 86% 18%, #bae6fd 0%, transparent 44%), linear-gradient(135deg, #831843, #07070d)

Open in Gradient Crafter Download image

Lemon Circuit gradient background using #1e1b4b, #22d3ee, #84cc16, #fef08a

Lemon Circuit

#1e1b4b · #22d3ee · #84cc16 · #fef08a

linear-gradient(115deg, #1e1b4b 32%, #22d3ee 44%, #84cc16 56%, #fef08a 65%)

Open in Gradient Crafter Download image

Festival Glass gradient background using #0f172a, #38bdf8, #e879f9, #fb923c

Festival Glass

#0f172a · #38bdf8 · #e879f9 · #fb923c

radial-gradient(circle at 44% 46%, #38bdf8 0%, transparent 44%), radial-gradient(circle at 70% 26%, #e879f9 0%, transparent 44%), radial-gradient(circle at 86% 16%, #fb923c 0%, transparent 44%), radial-gradient(circle at 16% 80%, #0f172a 0%, transparent 44%), linear-gradient(135deg, #0f172a, #07070d)

Open in Gradient Crafter Download image

Peacock Neon gradient background using #022c22, #06b6d4, #8b5cf6, #f0abfc

Peacock Neon

#022c22 · #06b6d4 · #8b5cf6 · #f0abfc

linear-gradient(145deg, #8b5cf6 44%, #f0abfc 45%, #06b6d4 46%, #022c22 52%)

Open in Gradient Crafter Download image

Firefly Arcade gradient background using #030712, #ef4444, #facc15, #22c55e

Firefly Arcade

#030712 · #ef4444 · #facc15 · #22c55e

radial-gradient(circle at 18% 78%, #030712 0%, transparent 44%), radial-gradient(circle at 46% 50%, #ef4444 0%, transparent 44%), radial-gradient(circle at 68% 30%, #facc15 0%, transparent 44%), radial-gradient(circle at 86% 18%, #22c55e 0%, transparent 44%), linear-gradient(135deg, #030712, #07070d)

Open in Gradient Crafter Download image

Opal Interface gradient background using #f8fafc, #bae6fd, #c4b5fd, #fb7185

Opal Interface

#f8fafc · #bae6fd · #c4b5fd · #fb7185

linear-gradient(130deg, #f8fafc 41%, #bae6fd 46%, #c4b5fd 49%, #fb7185 55%)

Open in Gradient Crafter Download image