Linear, radial and mesh gradients
Compare three useful gradient types, from directional two-color blends to layered, multi-point Mesh compositions.
CSS GradientExamples.
Explore 160 curated linear, radial and mesh gradient backgrounds for websites, interfaces, hero sections and brand visuals. Copy production-ready CSS or open any example in Gradialy to customize its colors, composition, motion and grain.
Copy CSS or customize visually
Use the ready declaration, save a favorite, or open the complete setup in Gradialy for precise visual editing.
Curated for real design projects
Every palette is selected for landing pages, product UI, portfolios, presentations, campaigns and visual identities.
Linear
Aurora Pulse
A vivid CSS gradient for hero sections, creative websites and app interfaces that need immediate visual energy.
#5146E5#FF6957
background: linear-gradient(135deg, #5146E5 0%, #FF6957 100%);
Linear
Soft Peach
A warm pastel gradient for portfolio backgrounds, editorial layouts and gentle landing page sections.
#FFE6D5#F47C7C
background: linear-gradient(135deg, #FFE6D5 0%, #F47C7C 100%);
Linear
Neon Glass
A dark neon gradient for immersive hero backgrounds, tech visuals and high-contrast UI experiments.
#0A0312#00D4FF
background: linear-gradient(135deg, #0A0312 0%, #00D4FF 100%);
Linear
Ocean Mist
A calm blue-green gradient for clean interfaces, wellness brands and spacious website backgrounds.
#75E6DA#189AB4
background: linear-gradient(135deg, #75E6DA 0%, #189AB4 100%);
Linear
Velvet Night
A deep purple CSS gradient for premium brand systems, dark landing pages and cinematic portfolio covers.
#16001E#7F00FF
background: linear-gradient(135deg, #16001E 0%, #7F00FF 100%);
Linear
Citrus Glow
A bright gradient for product announcements, CTA sections and optimistic brand visuals.
#F6C453#FF5F6D
background: linear-gradient(135deg, #F6C453 0%, #FF5F6D 100%);
Linear
Lavender Fog
A soft violet and blue gradient for dashboards, app cards and quiet interface backgrounds.
#E0C3FC#8EC5FC
background: linear-gradient(135deg, #E0C3FC 0%, #8EC5FC 100%);
Linear
Deep Ocean
A classic dark blue gradient for trustworthy SaaS heroes, fintech headers and focused presentation slides.
#000428#004E92
background: linear-gradient(135deg, #000428 0%, #004E92 100%);
Linear
Electric Berry
A saturated magenta-to-blue gradient for bold product cards, creative campaigns and social visuals.
#FC466B#3F5EFB
background: linear-gradient(135deg, #FC466B 0%, #3F5EFB 100%);
Linear
Mint Cream
A fresh green gradient for wellness brands, eco products and lightweight onboarding screens.
#D4FC79#96E6A1
background: linear-gradient(135deg, #D4FC79 0%, #96E6A1 100%);
Linear
Midnight Signal
A cool dark gradient for developer tools, technical landing pages and data-focused product screens.
#141E30#00C9FF
background: linear-gradient(135deg, #141E30 0%, #00C9FF 100%);
Linear
Sunset Coral
A warm coral CSS gradient for event pages, lifestyle brands and friendly homepage sections.
#FF9966#FF5E62
background: linear-gradient(135deg, #FF9966 0%, #FF5E62 100%);
Linear
Skyline Wash
A bright blue gradient for web app onboarding, clean dashboards and optimistic UI backgrounds.
#89F7FE#66A6FF
background: linear-gradient(135deg, #89F7FE 0%, #66A6FF 100%);
Linear
Royal Ink
A dark royal gradient for premium product pages, conference visuals and cinematic brand moments.
#020024#8E2DE2
background: linear-gradient(135deg, #020024 0%, #8E2DE2 100%);
Linear
Rose Quartz
A polished pink gradient for beauty brands, personal portfolios and elegant editorial hero sections.
#FBD3E9#BB377D
background: linear-gradient(135deg, #FBD3E9 0%, #BB377D 100%);
Linear
Fresh Lime
A crisp green gradient for success states, friendly banners and lightweight interface details.
#A8FF78#78FFD6
background: linear-gradient(135deg, #A8FF78 0%, #78FFD6 100%);
Linear
Plasma Wave
A hot pink gradient for music visuals, creative launches and expressive landing page backgrounds.
#F857A6#FF5858
background: linear-gradient(135deg, #F857A6 0%, #FF5858 100%);
Linear
Graphite Blue
A restrained dark gradient for admin dashboards, utility interfaces and content-heavy tool surfaces.
#232526#414345
background: linear-gradient(135deg, #232526 0%, #414345 100%);
Linear
Mango Blush
A sunny orange gradient for ecommerce highlights, promotional hero areas and cheerful brand systems.
#FDC830#F37335
background: linear-gradient(135deg, #FDC830 0%, #F37335 100%);
Linear
Ice Violet
A clean blue gradient for onboarding flows, productivity tools and polished UI sections.
#A1C4FD#C2E9FB
background: linear-gradient(135deg, #A1C4FD 0%, #C2E9FB 100%);
Linear
Cosmic Violet
A moody violet gradient for creative studios, digital art pages and atmospheric product storytelling.
#20002C#CBB4D4
background: linear-gradient(135deg, #20002C 0%, #CBB4D4 100%);
Linear
Cotton Candy
A playful pastel gradient for creator pages, soft brand visuals and friendly product experiences.
#FFDEE9#B5FFFC
background: linear-gradient(135deg, #FFDEE9 0%, #B5FFFC 100%);
Linear
Spring Field
A green gradient for organic products, growth-focused dashboards and optimistic landing pages.
#00B09B#96C93D
background: linear-gradient(135deg, #00B09B 0%, #96C93D 100%);
Linear
Laser Dusk
A dark teal and purple gradient for event pages, nightlife visuals and high-impact hero backgrounds.
#360033#0B8793
background: linear-gradient(135deg, #360033 0%, #0B8793 100%);
Linear
Ember Rose
A rich rose gradient for bold brand pages, visual campaigns and expressive presentation covers.
#B24592#F15F79
background: linear-gradient(135deg, #B24592 0%, #F15F79 100%);
Linear
Carbon Slate
A dark neutral gradient for documentation pages, developer portals and restrained product interfaces.
#0F2027#2C5364
background: linear-gradient(135deg, #0F2027 0%, #2C5364 100%);
Linear
SaaS Indigo
A confident blue-violet gradient for SaaS heroes, product dashboards and trusted tech brands.
#4338CA#22D3EE
background: linear-gradient(135deg, #4338CA 0%, #22D3EE 100%);
Linear
Signal Lime
A sharp dark-to-lime gradient for success states, analytics modules and bold interface accents.
#101828#84CC16
background: linear-gradient(135deg, #101828 0%, #84CC16 100%);
Linear
Editorial Peach
A warm editorial gradient for portfolios, creator landing pages and lifestyle campaign headers.
#FFD6BA#F97316
background: linear-gradient(135deg, #FFD6BA 0%, #F97316 100%);
Linear
Cloud Console
A clean blue gradient for cloud dashboards, onboarding panels and product documentation pages.
#E0F2FE#60A5FA
background: linear-gradient(135deg, #E0F2FE 0%, #60A5FA 100%);
Linear
Obsidian Mint
A focused dark gradient for developer tools, terminal-inspired interfaces and premium admin screens.
#06141B#2DD4BF
background: linear-gradient(135deg, #06141B 0%, #2DD4BF 100%);
Linear
Solar Pitch
A high-energy orange-red gradient for launch pages, investor decks and bold call-to-action sections.
#F59E0B#EF4444
background: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
Linear
Neon Command
A futuristic neon gradient for command centers, AI products and experimental interface backgrounds.
#0F172A#22D3EE
background: linear-gradient(135deg, #0F172A 0%, #22D3EE 100%);
Linear
Quiet Sage
A soft green gradient for wellness brands, calm forms and friendly product onboarding.
#ECFCCB#86EFAC
background: linear-gradient(135deg, #ECFCCB 0%, #86EFAC 100%);
Linear
Studio Rose
A polished rose gradient for creative studio pages, personal brands and campaign hero sections.
#BE185D#FB7185
background: linear-gradient(135deg, #BE185D 0%, #FB7185 100%);
Linear
Navy Ledger
A stable navy gradient for finance dashboards, reports and mature product interfaces.
#020617#1D4ED8
background: linear-gradient(135deg, #020617 0%, #1D4ED8 100%);
Linear
Prism Pop
A vivid creative gradient for event pages, digital launches and high-impact brand moments.
#7C3AED#FACC15
background: linear-gradient(135deg, #7C3AED 0%, #FACC15 100%);
Linear
Aqua Ledger
A crisp blue-green gradient for product sections, data visualizations and modern app backgrounds.
#0EA5E9#14B8A6
background: linear-gradient(135deg, #0EA5E9 0%, #14B8A6 100%);
Linear
Lilac Paper
A light violet gradient for editorial cards, note apps and gentle portfolio surfaces.
#F5D0FE#C4B5FD
background: linear-gradient(135deg, #F5D0FE 0%, #C4B5FD 100%);
Linear
Copper Signal
A warm dark gradient for premium craft brands, restaurant visuals and cinematic product pages.
#1C1917#D97706
background: linear-gradient(135deg, #1C1917 0%, #D97706 100%);
Linear
Cyber Orchid
A dramatic neon gradient for gaming, music, nightlife and immersive landing pages.
#111827#38BDF8
background: linear-gradient(135deg, #111827 0%, #38BDF8 100%);
Linear
Fresh Onboarding
A bright friendly gradient for onboarding screens, mobile apps and lightweight feature panels.
#BAE6FD#A7F3D0
background: linear-gradient(135deg, #BAE6FD 0%, #A7F3D0 100%);
Linear
Brand Flame
A hot red-orange gradient for campaign banners, product drops and decisive brand statements.
#DC2626#F97316
background: linear-gradient(135deg, #DC2626 0%, #F97316 100%);
Linear
Deep Violet Desk
A quiet violet gradient for dark dashboards, portfolio indexes and focused work surfaces.
#12002F#4C1D95
background: linear-gradient(135deg, #12002F 0%, #4C1D95 100%);
Linear
Morning Product
A warm morning gradient for product introductions, friendly landing pages and creator websites.
#FEF3C7#FDBA74
background: linear-gradient(135deg, #FEF3C7 0%, #FDBA74 100%);
Linear
Electric Cyan
A bright cyan-lime gradient for tech cards, notification surfaces and energetic UI details.
#164E63#A3E635
background: linear-gradient(135deg, #164E63 0%, #A3E635 100%);
Linear
Royal Product
A bold purple-pink gradient for premium SaaS, brand launches and strong hero copy.
#312E81#DB2777
background: linear-gradient(135deg, #312E81 0%, #DB2777 100%);
Linear
Glass Meadow
A fresh translucent-feeling gradient for wellness dashboards, environmental brands and cards.
#D9F99D#67E8F9
background: linear-gradient(135deg, #D9F99D 0%, #67E8F9 100%);
Linear
Carbon Pulse
A dark blue-violet gradient for security products, AI tools and developer-first landing pages.
#030712#A855F7
background: linear-gradient(135deg, #030712 0%, #A855F7 100%);
Linear
Coral Interface
A warm coral gradient for creator tools, ecommerce highlights and soft interface sections.
#FED7AA#FB7185
background: linear-gradient(135deg, #FED7AA 0%, #FB7185 100%);
Linear
Pacific Hero
A composed ocean gradient for travel, sustainability and service landing pages.
#0369A1#0F766E
background: linear-gradient(135deg, #0369A1 0%, #0F766E 100%);
Linear
Plum Finance
A premium plum gradient for fintech headers, pricing pages and investor-facing visuals.
#1E1B4B#7E22CE
background: linear-gradient(135deg, #1E1B4B 0%, #7E22CE 100%);
Linear
Candy System
A playful pastel gradient for design systems, app empty states and friendly brand components.
#FBCFE8#BFDBFE
background: linear-gradient(135deg, #FBCFE8 0%, #BFDBFE 100%);
Linear
Laser Aurora
A luminous green-violet gradient for web3 pages, event visuals and futuristic presentations.
#0B1120#7C3AED
background: linear-gradient(135deg, #0B1120 0%, #7C3AED 100%);
Linear
Amber Utility
A practical amber gradient for warning states, product highlights and operational dashboards.
#78350F#F59E0B
background: linear-gradient(135deg, #78350F 0%, #F59E0B 100%);
Linear
Snow Pixel
A subtle cool gradient for documentation cards, neutral app backgrounds and quiet content areas.
#F8FAFC#CBD5E1
background: linear-gradient(135deg, #F8FAFC 0%, #CBD5E1 100%);
Linear
Raspberry Hero
A saturated berry gradient for direct-to-consumer brands, hero banners and visual campaigns.
#9F1239#F43F5E
background: linear-gradient(135deg, #9F1239 0%, #F43F5E 100%);
Linear
Data Lagoon
A deep blue gradient for analytics products, monitoring screens and technical dashboards.
#082F49#0E7490
background: linear-gradient(135deg, #082F49 0%, #0E7490 100%);
Linear
Soft Signal
A gentle lilac-pink gradient for personal sites, portfolio intros and warm editorial layouts.
#E9D5FF#FBCFE8
background: linear-gradient(135deg, #E9D5FF 0%, #FBCFE8 100%);
Linear
Neon Citrus
A punchy green-yellow gradient for energetic campaigns, sports visuals and standout banners.
#1A2E05#FDE047
background: linear-gradient(135deg, #1A2E05 0%, #FDE047 100%);
Linear
Ink Horizon
A restrained dark gradient for agencies, documentation portals and serious product narratives.
#020617#334155
background: linear-gradient(135deg, #020617 0%, #334155 100%);
Linear
Sky Product
A blue-indigo gradient for product tours, hero sections and cloud software interfaces.
#38BDF8#6366F1
background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
Linear
Velvet Citrus
A warm premium gradient for food, hospitality and tactile brand visuals.
#7C2D12#FDBA74
background: linear-gradient(135deg, #7C2D12 0%, #FDBA74 100%);
Linear
Arctic Mint
A clean mint-blue gradient for healthtech, calm apps and spacious dashboard backgrounds.
#CCFBF1#E0F2FE
background: linear-gradient(135deg, #CCFBF1 0%, #E0F2FE 100%);
Linear
Magenta Console
A neon console gradient for design tools, creative dashboards and experimental product panels.
#111827#60A5FA
background: linear-gradient(135deg, #111827 0%, #60A5FA 100%);
Linear
Founder Blue
A confident blue-violet gradient for startup homepages, pitch decks and platform launches.
#1D4ED8#7C3AED
background: linear-gradient(135deg, #1D4ED8 0%, #7C3AED 100%);
Linear
Honey Pastel
A bright honey gradient for friendly ecommerce, food packaging and optimistic campaign sections.
#FEF08A#FDBA74
background: linear-gradient(135deg, #FEF08A 0%, #FDBA74 100%);
Linear
Slate Aurora
A neutral dark gradient for product documentation, admin shells and professional tools.
#0F172A#475569
background: linear-gradient(135deg, #0F172A 0%, #475569 100%);
Linear
Fuchsia Drift
A vivid fuchsia gradient for creator launches, culture pages and music campaign visuals.
#701A75#FB7185
background: linear-gradient(135deg, #701A75 0%, #FB7185 100%);
Linear
Teal Studio
A polished teal gradient for studio websites, identity systems and product feature blocks.
#0F766E#2DD4BF
background: linear-gradient(135deg, #0F766E 0%, #2DD4BF 100%);
Linear
Peach Dashboard
A soft peach gradient for friendly dashboards, client portals and approachable SaaS interfaces.
#FFEDD5#FDBA74
background: linear-gradient(135deg, #FFEDD5 0%, #FDBA74 100%);
Linear
Night Market
A dark rose gradient for fashion, culture, restaurant and nightlife landing pages.
#18181B#BE123C
background: linear-gradient(135deg, #18181B 0%, #BE123C 100%);
Linear
Neon Ocean
A vivid oceanic gradient for interactive demos, product showcases and digital campaign sections.
#042F2E#8B5CF6
background: linear-gradient(135deg, #042F2E 0%, #8B5CF6 100%);
Linear
Calm Commerce
A soft blue gradient for ecommerce UI, checkout surfaces and trustworthy product cards.
#DBEAFE#C7D2FE
background: linear-gradient(135deg, #DBEAFE 0%, #C7D2FE 100%);
Linear
Ruby Launch
A strong ruby-orange gradient for announcements, sale banners and decisive launch pages.
#991B1B#F97316
background: linear-gradient(135deg, #991B1B 0%, #F97316 100%);
Linear
Developer Mist
A muted dark gradient for code-heavy pages, docs, changelogs and developer portal surfaces.
#111827#64748B
background: linear-gradient(135deg, #111827 0%, #64748B 100%);
Linear
Pastel Lens
A soft tri-tone gradient for creative portfolios, moodboards and editorial hero sections.
#FDE68A#C4B5FD
background: linear-gradient(135deg, #FDE68A 0%, #C4B5FD 100%);
Linear
Signal Violet
A signal-like violet-cyan gradient for AI interfaces, beta launches and product cards.
#312E81#22D3EE
background: linear-gradient(135deg, #312E81 0%, #22D3EE 100%);
Linear
Forest Product
A grounded green gradient for outdoor brands, sustainability pages and natural product stories.
#14532D#84CC16
background: linear-gradient(135deg, #14532D 0%, #84CC16 100%);
Linear
Rose Interface
A light rose gradient for form panels, beauty apps and warm onboarding flows.
#FFE4E6#FDA4AF
background: linear-gradient(135deg, #FFE4E6 0%, #FDA4AF 100%);
Linear
Midnight Iris
A deep iris gradient for premium hero sections, conference pages and cinematic intros.
#0C0A1F#6D28D9
background: linear-gradient(135deg, #0C0A1F 0%, #6D28D9 100%);
Linear
Cyan Brand
A clear cyan-blue gradient for software brands, product sections and modern homepage blocks.
#0891B2#2563EB
background: linear-gradient(135deg, #0891B2 0%, #2563EB 100%);
Linear
Apricot Glass
A soft apricot gradient for light cards, brand systems and gentle interface backgrounds.
#FED7AA#FEF3C7
background: linear-gradient(135deg, #FED7AA 0%, #FEF3C7 100%);
Linear
Terminal Glow
A terminal-inspired green gradient for developer tools, security dashboards and status pages.
#020617#22C55E
background: linear-gradient(135deg, #020617 0%, #22C55E 100%);
Linear
Purple Revenue
A business-ready purple-blue gradient for pricing pages, sales decks and growth platforms.
#581C87#2563EB
background: linear-gradient(135deg, #581C87 0%, #2563EB 100%);
Linear
Soft Clay
A natural clay gradient for craft brands, interior portfolios and calm editorial pages.
#F5E0D3#D6A184
background: linear-gradient(135deg, #F5E0D3 0%, #D6A184 100%);
Linear
Black Cherry
A rich cherry gradient for fashion launches, luxury visuals and expressive brand sections.
#1F0712#BE185D
background: linear-gradient(135deg, #1F0712 0%, #BE185D 100%);
Linear
Neon Peach
A glowing peach-yellow gradient for energetic hero sections, creator drops and social campaigns.
#7C2D12#FDE047
background: linear-gradient(135deg, #7C2D12 0%, #FDE047 100%);
Linear
Interface Dawn
A light dawn gradient for app home screens, knowledge bases and calm product introductions.
#F0FDFA#93C5FD
background: linear-gradient(135deg, #F0FDFA 0%, #93C5FD 100%);
Linear
Blue Authority
A trustworthy blue gradient for enterprise products, consulting sites and service landing pages.
#1E3A8A#0EA5E9
background: linear-gradient(135deg, #1E3A8A 0%, #0EA5E9 100%);
Linear
Mauve Portfolio
A refined mauve gradient for designer portfolios, personal sites and creative case studies.
#E9D5FF#A78BFA
background: linear-gradient(135deg, #E9D5FF 0%, #A78BFA 100%);
Linear
Dark Emerald
A premium emerald gradient for finance, sustainability, luxury and editorial brand pages.
#022C22#059669
background: linear-gradient(135deg, #022C22 0%, #059669 100%);
Linear
Neon Radar
A radar-like cyan-lime gradient for monitoring products, data tools and interactive dashboards.
#0F172A#A3E635
background: linear-gradient(135deg, #0F172A 0%, #A3E635 100%);
Linear
Product Bloom
A warm bloom gradient for product launches, creator storefronts and upbeat brand campaigns.
#FBCFE8#F97316
background: linear-gradient(135deg, #FBCFE8 0%, #F97316 100%);
Linear
Cool Slate UI
A cool slate-teal gradient for operational tools, tables and dense SaaS interfaces.
#1E293B#0F766E
background: linear-gradient(135deg, #1E293B 0%, #0F766E 100%);
Linear
Golden Studio
A golden gradient for premium studio pages, awards sections and confident brand storytelling.
#92400E#FBBF24
background: linear-gradient(135deg, #92400E 0%, #FBBF24 100%);
Linear
Dream App
A dreamy violet-cyan gradient for mobile apps, learning products and friendly UI panels.
#DDD6FE#A5F3FC
background: linear-gradient(135deg, #DDD6FE 0%, #A5F3FC 100%);
Linear
Infrared Night
A dramatic red-violet gradient for events, launches and immersive creative landing pages.
#111827#A855F7
background: linear-gradient(135deg, #111827 0%, #A855F7 100%);
Linear
Trust Mint
A trustworthy mint gradient for healthcare, fintech modules and clear interface highlights.
#065F46#5EEAD4
background: linear-gradient(135deg, #065F46 0%, #5EEAD4 100%);
Linear
Velvet Cloud
A soft violet-yellow gradient for creator brands, editorial pages and gentle hero backgrounds.
#F5D0FE#FDE68A
background: linear-gradient(135deg, #F5D0FE 0%, #FDE68A 100%);
Radial
Solar Focus
A warm radial glow that creates a natural focal point behind product renders, launch headlines and optimistic brand marks.
#FFF4C7#F97316
background: radial-gradient(circle at 50% 46%, #FFF4C7 0%, #F97316 100%);
Radial
Arctic Halo
A cool centered gradient for onboarding screens, clean dashboards and interface panels that need depth without visual noise.
#E8FAFF#2F80ED
background: radial-gradient(circle at 48% 42%, #E8FAFF 0%, #2F80ED 100%);
Radial
Rose Spotlight
A soft rose spotlight for editorial covers, portfolio introductions and expressive lifestyle landing pages.
#FFD9E8#C026D3
background: radial-gradient(circle at 38% 36%, #FFD9E8 0%, #C026D3 100%);
Radial
Midnight Beacon
A concentrated cyan beacon for dark technology heroes, data products and high-contrast feature callouts.
#23D5FF#060817
background: radial-gradient(circle at 62% 38%, #23D5FF 0%, #060817 100%);
Radial
Citrus Lens
A vivid citrus center that adds energy to campaign banners, product announcements and social graphics.
#FFF2A8#F43F5E
background: radial-gradient(circle at 54% 54%, #FFF2A8 0%, #F43F5E 100%);
Radial
Mint Portal
A calm mint portal for wellness interfaces, sustainable brands and spacious product backgrounds.
#D7FFF0#0F766E
background: radial-gradient(circle at 50% 50%, #D7FFF0 0%, #0F766E 100%);
Radial
Violet Orbit
An offset violet orbit that leaves useful negative space for copy while keeping the composition distinctive.
#F0D8FF#5B21B6
background: radial-gradient(circle at 72% 30%, #F0D8FF 0%, #5B21B6 100%);
Radial
Coral Bloom
A friendly coral bloom for beauty products, hospitality pages and warm editorial modules.
#FFE4D6#FB5A61
background: radial-gradient(circle at 45% 62%, #FFE4D6 0%, #FB5A61 100%);
Radial
Ocean Core
A deep ocean center for travel interfaces, marine brands and product sections built around imagery.
#9FF3FF#075985
background: radial-gradient(circle at 58% 48%, #9FF3FF 0%, #075985 100%);
Radial
Amber Signal
An amber signal with a grounded edge, suitable for premium packaging, events and confident call-to-action areas.
#FFE8A3#9A3412
background: radial-gradient(circle at 30% 42%, #FFE8A3 0%, #9A3412 100%);
Radial
Cloud Halo
A nearly white halo for subtle app surfaces, pricing sections and calm website transitions.
#FFFFFF#A5B4FC
background: radial-gradient(circle at 50% 38%, #FFFFFF 0%, #A5B4FC 100%);
Radial
Emerald Focus
A focused emerald light for finance dashboards, sustainability reports and premium dark interfaces.
#A7F3D0#064E3B
background: radial-gradient(circle at 66% 64%, #A7F3D0 0%, #064E3B 100%);
Radial
Magenta Eclipse
A saturated magenta eclipse for music platforms, event campaigns and immersive digital covers.
#FF5ACD#240046
background: radial-gradient(circle at 46% 44%, #FF5ACD 0%, #240046 100%);
Radial
Blue Aperture
A controlled blue aperture for B2B products, trustworthy SaaS pages and presentation backgrounds.
#C7E8FF#1E3A8A
background: radial-gradient(circle at 52% 50%, #C7E8FF 0%, #1E3A8A 100%);
Radial
Peach Aura
A soft peach aura for personal brands, portfolio stories and approachable product introductions.
#FFF0E5#F97373
background: radial-gradient(circle at 40% 48%, #FFF0E5 0%, #F97373 100%);
Radial
Neon Reactor
A high-energy reactor for gaming interfaces, creative technology and futuristic campaign work.
#8BFFEA#6D00FF
background: radial-gradient(circle at 50% 52%, #8BFFEA 0%, #6D00FF 100%);
Radial
Slate Glow
A restrained slate glow for developer tools, admin products and serious interface backgrounds.
#CBD5E1#172033
background: radial-gradient(circle at 63% 35%, #CBD5E1 0%, #172033 100%);
Radial
Lavender Center
A balanced lavender center for community products, lightweight dashboards and friendly app screens.
#F2E8FF#8B5CF6
background: radial-gradient(circle at 50% 50%, #F2E8FF 0%, #8B5CF6 100%);
Radial
Ruby Core
A ruby focal point for luxury brands, cultural projects and dramatic editorial layouts.
#FFB4C2#7F1D1D
background: radial-gradient(circle at 52% 58%, #FFB4C2 0%, #7F1D1D 100%);
Radial
Aqua Pulse
A fresh aqua pulse that works behind interface mockups, product screenshots and clean launch copy.
#C5FFF8#0891B2
background: radial-gradient(circle at 36% 50%, #C5FFF8 0%, #0891B2 100%);
Radial
Golden Halo
A refined golden halo for awards, premium services and confident founder-led brands.
#FFF7CC#D97706
background: radial-gradient(circle at 50% 34%, #FFF7CC 0%, #D97706 100%);
Radial
Graphite Lens
A graphite lens for technical products, security interfaces and monochrome visual systems.
#94A3B8#020617
background: radial-gradient(circle at 44% 40%, #94A3B8 0%, #020617 100%);
Radial
Lime Orbit
An offset lime orbit for active brands, sports products and unconventional interface accents.
#ECFCCB#3F6212
background: radial-gradient(circle at 68% 52%, #ECFCCB 0%, #3F6212 100%);
Radial
Plum Spotlight
A rich plum spotlight for creative studios, portfolio cases and atmospheric feature sections.
#E9D5FF#581C87
background: radial-gradient(circle at 34% 62%, #E9D5FF 0%, #581C87 100%);
Mesh · 5 points
Quiet Spectrum
A balanced five-point mesh for polished product pages, calm app backgrounds and contemporary presentation covers.
#6657FF#FF7183#77D8FF#FFD36B+1 more colors
background: radial-gradient(circle at 28.0% 25.0%, #6657FFEB 0%, #6657FF94 18.1%, transparent 56.2%), radial-gradient(circle at 72.0% 75.0%, #A6F4C5BD 0%, #A6F4C56B 18.1%, transparent 56.2%), radial-gradient(circle at 28.0% 75.0%, #FFD36BBD 0%, #FFD36B6B 18.1%, transparent 56.2%), radial-gradient(circle at 50.0% 50.0%, #77D8FFBD 0%, #77D8FF6B 18.1%, transparent 56.2%), radial-gradient(circle at 72.0% 25.0%, #FF7183BD 0%, #FF71836B 18.1%, transparent 56.2%), linear-gradient(135deg, #6657FF 0%, #A6F4C5 100%);
Mesh · 6 points
Editorial Bloom
A soft editorial mesh with generous color transitions for portfolios, magazines and lifestyle stories.
#F7C7D9#FFD7A8#B8C6FF#FFF2D7+2 more colors
background: radial-gradient(circle at 20.0% 30.0%, #F7C7D9EB 0%, #F7C7D991 16.8%, transparent 58.3%), radial-gradient(circle at 80.0% 70.0%, #DDB7FFBD 0%, #DDB7FF68 16.8%, transparent 58.3%), radial-gradient(circle at 50.0% 70.0%, #B9E8D0BD 0%, #B9E8D068 16.8%, transparent 58.3%), radial-gradient(circle at 20.0% 70.0%, #FFF2D7BD 0%, #FFF2D768 16.8%, transparent 58.3%), radial-gradient(circle at 80.0% 30.0%, #B8C6FFBD 0%, #B8C6FF68 16.8%, transparent 58.3%), radial-gradient(circle at 50.0% 30.0%, #FFD7A8BD 0%, #FFD7A868 16.8%, transparent 58.3%), linear-gradient(135deg, #F7C7D9 0%, #DDB7FF 100%);
Mesh · 4 points
Alpine Haze
A cool alpine palette arranged symmetrically for wellness, architecture and sustainable brand communication.
#D9F5FF#A7D8C9#F4F0D8#91A6D8
background: radial-gradient(circle at 30.0% 30.0%, #D9F5FFEB 0%, #D9F5FF8E 15.8%, transparent 59%), radial-gradient(circle at 70.0% 70.0%, #91A6D8BD 0%, #91A6D865 15.8%, transparent 59%), radial-gradient(circle at 30.0% 70.0%, #F4F0D8BD 0%, #F4F0D865 15.8%, transparent 59%), radial-gradient(circle at 70.0% 30.0%, #A7D8C9BD 0%, #A7D8C965 15.8%, transparent 59%), linear-gradient(135deg, #D9F5FF 0%, #91A6D8 100%);
Mesh · 5 points
Studio Linen
A quiet neutral mesh that replaces flat beige with subtle depth in editorial interfaces and studio portfolios.
#F6E9DF#D7C7B8#C8D9D2#F0C6C6+1 more colors
background: radial-gradient(circle at 28.0% 25.0%, #F6E9DFEB 0%, #F6E9DF8D 15.4%, transparent 53.3%), radial-gradient(circle at 72.0% 75.0%, #B7B8D8BD 0%, #B7B8D865 15.4%, transparent 53.3%), radial-gradient(circle at 28.0% 75.0%, #F0C6C6BD 0%, #F0C6C665 15.4%, transparent 53.3%), radial-gradient(circle at 50.0% 50.0%, #C8D9D2BD 0%, #C8D9D265 15.4%, transparent 53.3%), radial-gradient(circle at 72.0% 25.0%, #D7C7B8BD 0%, #D7C7B865 15.4%, transparent 53.3%), linear-gradient(135deg, #F6E9DF 0%, #B7B8D8 100%);
Mesh · 7 points
Soft Horizon
A seven-point horizon with restrained color rhythm for spacious hero sections and visual storytelling.
#93C5FD#DDD6FE#FBCFE8#FED7AA+3 more colors
background: radial-gradient(circle at 20.0% 23.0%, #93C5FDEB 0%, #93C5FD90 16.4%, transparent 61.2%), radial-gradient(circle at 80.0% 77.0%, #FDE68ABD 0%, #FDE68A67 16.4%, transparent 61.2%), radial-gradient(circle at 50.0% 77.0%, #E9D5FFBD 0%, #E9D5FF67 16.4%, transparent 61.2%), radial-gradient(circle at 20.0% 77.0%, #BAE6FDBD 0%, #BAE6FD67 16.4%, transparent 61.2%), radial-gradient(circle at 50.0% 50.0%, #FED7AABD 0%, #FED7AA67 16.4%, transparent 61.2%), radial-gradient(circle at 80.0% 23.0%, #FBCFE8BD 0%, #FBCFE867 16.4%, transparent 61.2%), radial-gradient(circle at 50.0% 23.0%, #DDD6FEBD 0%, #DDD6FE67 16.4%, transparent 61.2%), linear-gradient(135deg, #93C5FD 0%, #FDE68A 100%);
Mesh · 4 points
Porcelain Light
A near-white mesh for UI surfaces that need dimension while preserving excellent readability and visual calm.
#F9FAFB#DDEAFE#FCE7F3#DCFCE7
background: radial-gradient(circle at 30.0% 30.0%, #F9FAFBEB 0%, #F9FAFB8A 14.1%, transparent 56.9%), radial-gradient(circle at 70.0% 70.0%, #DCFCE7BD 0%, #DCFCE761 14.1%, transparent 56.9%), radial-gradient(circle at 30.0% 70.0%, #FCE7F3BD 0%, #FCE7F361 14.1%, transparent 56.9%), radial-gradient(circle at 70.0% 30.0%, #DDEAFEBD 0%, #DDEAFE61 14.1%, transparent 56.9%), linear-gradient(135deg, #F9FAFB 0%, #DCFCE7 100%);
Mesh · 8 points
Nordic Aurora
A controlled aurora palette for Scandinavian-inspired brands, conference visuals and large website backgrounds.
#A5F3FC#C4B5FD#F9A8D4#99F6E4+4 more colors
background: radial-gradient(circle at 20.0% 22.0%, #A5F3FCEB 0%, #A5F3FC93 17.5%, transparent 59.8%), radial-gradient(circle at 80.0% 78.0%, #D8B4FEBD 0%, #D8B4FE6A 17.5%, transparent 59.8%), radial-gradient(circle at 50.0% 78.0%, #FDE68ABD 0%, #FDE68A6A 17.5%, transparent 59.8%), radial-gradient(circle at 20.0% 78.0%, #E0E7FFBD 0%, #E0E7FF6A 17.5%, transparent 59.8%), radial-gradient(circle at 66.0% 50.0%, #BFDBFEBD 0%, #BFDBFE6A 17.5%, transparent 59.8%), radial-gradient(circle at 34.0% 50.0%, #99F6E4BD 0%, #99F6E46A 17.5%, transparent 59.8%), radial-gradient(circle at 80.0% 22.0%, #F9A8D4BD 0%, #F9A8D46A 17.5%, transparent 59.8%), radial-gradient(circle at 50.0% 22.0%, #C4B5FDBD 0%, #C4B5FD6A 17.5%, transparent 59.8%), linear-gradient(135deg, #A5F3FC 0%, #D8B4FE 100%);
Mesh · 5 points
Garden Paper
A paper-like botanical mesh for natural products, packaging concepts and gentle campaign visuals.
#D9F99D#FDE68A#FBCFE8#BBF7D0+1 more colors
background: radial-gradient(circle at 28.0% 25.0%, #D9F99DEB 0%, #D9F99D8F 16.1%, transparent 54.7%), radial-gradient(circle at 72.0% 75.0%, #C7D2FEBD 0%, #C7D2FE66 16.1%, transparent 54.7%), radial-gradient(circle at 28.0% 75.0%, #BBF7D0BD 0%, #BBF7D066 16.1%, transparent 54.7%), radial-gradient(circle at 50.0% 50.0%, #FBCFE8BD 0%, #FBCFE866 16.1%, transparent 54.7%), radial-gradient(circle at 72.0% 25.0%, #FDE68ABD 0%, #FDE68A66 16.1%, transparent 54.7%), linear-gradient(135deg, #D9F99D 0%, #C7D2FE 100%);
Mesh · 6 points
Product Dawn
A clear six-point dawn made to frame product screenshots without competing with interface details.
#FDBA74#FCA5A5#C4B5FD#93C5FD+2 more colors
background: radial-gradient(circle at 20.0% 30.0%, #FDBA74EB 0%, #FDBA7496 18.8%, transparent 56.9%), radial-gradient(circle at 80.0% 70.0%, #A7F3D0BD 0%, #A7F3D06D 18.8%, transparent 56.9%), radial-gradient(circle at 50.0% 70.0%, #FDE68ABD 0%, #FDE68A6D 18.8%, transparent 56.9%), radial-gradient(circle at 20.0% 70.0%, #93C5FDBD 0%, #93C5FD6D 18.8%, transparent 56.9%), radial-gradient(circle at 80.0% 30.0%, #C4B5FDBD 0%, #C4B5FD6D 18.8%, transparent 56.9%), radial-gradient(circle at 50.0% 30.0%, #FCA5A5BD 0%, #FCA5A56D 18.8%, transparent 56.9%), linear-gradient(135deg, #FDBA74 0%, #A7F3D0 100%);
Mesh · 3 points
Clear Atmosphere
A minimal three-point atmosphere for documentation, onboarding and content-heavy product pages.
#DBEAFE#E0F2FE#F0FDFA
background: radial-gradient(circle at 20.0% 50.0%, #DBEAFEEB 0%, #DBEAFE8C 14.7%, transparent 63.4%), radial-gradient(circle at 80.0% 50.0%, #F0FDFABD 0%, #F0FDFA63 14.7%, transparent 63.4%), radial-gradient(circle at 50.0% 50.0%, #E0F2FEBD 0%, #E0F2FE63 14.7%, transparent 63.4%), linear-gradient(135deg, #DBEAFE 0%, #F0FDFA 100%);
Mesh · 7 points
Gentle Current
A gentle seven-color current for optimistic brands, education products and friendly landing pages.
#BFDBFE#A7F3D0#FDE68A#FBCFE8+3 more colors
background: radial-gradient(circle at 20.0% 23.0%, #BFDBFEEB 0%, #BFDBFE92 17.1%, transparent 61.9%), radial-gradient(circle at 80.0% 77.0%, #FECACABD 0%, #FECACA69 17.1%, transparent 61.9%), radial-gradient(circle at 50.0% 77.0%, #BAE6FDBD 0%, #BAE6FD69 17.1%, transparent 61.9%), radial-gradient(circle at 20.0% 77.0%, #DDD6FEBD 0%, #DDD6FE69 17.1%, transparent 61.9%), radial-gradient(circle at 50.0% 50.0%, #FBCFE8BD 0%, #FBCFE869 17.1%, transparent 61.9%), radial-gradient(circle at 80.0% 23.0%, #FDE68ABD 0%, #FDE68A69 17.1%, transparent 61.9%), radial-gradient(circle at 50.0% 23.0%, #A7F3D0BD 0%, #A7F3D069 17.1%, transparent 61.9%), linear-gradient(135deg, #BFDBFE 0%, #FECACA 100%);
Mesh · 9 points
Mineral Wash
A structured nine-point mineral palette for architecture, materials and understated premium systems.
#94A3B8#CBD5E1#A8A29E#D6D3D1+5 more colors
background: radial-gradient(circle at 20.0% 20.0%, #94A3B8EB 0%, #94A3B88C 15.1%, transparent 60.5%), radial-gradient(circle at 80.0% 80.0%, #E2E8F0BD 0%, #E2E8F064 15.1%, transparent 60.5%), radial-gradient(circle at 50.0% 80.0%, #BFDBFEBD 0%, #BFDBFE64 15.1%, transparent 60.5%), radial-gradient(circle at 20.0% 80.0%, #F5D0FEBD 0%, #F5D0FE64 15.1%, transparent 60.5%), radial-gradient(circle at 80.0% 50.0%, #C4B5FDBD 0%, #C4B5FD64 15.1%, transparent 60.5%), radial-gradient(circle at 50.0% 50.0%, #99F6E4BD 0%, #99F6E464 15.1%, transparent 60.5%), radial-gradient(circle at 20.0% 50.0%, #D6D3D1BD 0%, #D6D3D164 15.1%, transparent 60.5%), radial-gradient(circle at 80.0% 20.0%, #A8A29EBD 0%, #A8A29E64 15.1%, transparent 60.5%), radial-gradient(circle at 50.0% 20.0%, #CBD5E1BD 0%, #CBD5E164 15.1%, transparent 60.5%), linear-gradient(135deg, #94A3B8 0%, #E2E8F0 100%);
Mesh · 5 points
Liquid Orchard
An organic orchard palette with lively overlaps for food, hospitality and energetic seasonal campaigns.
#84CC16#FACC15#FB7185#2DD4BF+1 more colors
background: radial-gradient(circle at 14.0% 18.0%, #84CC16EB 0%, #84CC1699 19.8%, transparent 59%), radial-gradient(circle at 83.0% 72.0%, #A78BFABD 0%, #A78BFA70 19.8%, transparent 59%), radial-gradient(circle at 17.0% 77.0%, #2DD4BFBD 0%, #2DD4BF70 19.8%, transparent 59%), radial-gradient(circle at 85.0% 20.0%, #FB7185BD 0%, #FB718570 19.8%, transparent 59%), radial-gradient(circle at 52.0% 31.0%, #FACC15BD 0%, #FACC1570 19.8%, transparent 59%), linear-gradient(135deg, #84CC16 0%, #A78BFA 100%);
Mesh · 6 points
Coral Lagoon
A tropical six-point mesh that combines water, coral and warm light for travel and leisure brands.
#06B6D4#38BDF8#FB7185#FDBA74+2 more colors
background: radial-gradient(circle at 14.0% 18.0%, #06B6D4EB 0%, #06B6D495 18.5%, transparent 60.5%), radial-gradient(circle at 46.0% 84.0%, #A78BFABD 0%, #A78BFA6C 18.5%, transparent 60.5%), radial-gradient(circle at 83.0% 72.0%, #14B8A6BD 0%, #14B8A66C 18.5%, transparent 60.5%), radial-gradient(circle at 17.0% 77.0%, #FDBA74BD 0%, #FDBA746C 18.5%, transparent 60.5%), radial-gradient(circle at 85.0% 20.0%, #FB7185BD 0%, #FB71856C 18.5%, transparent 60.5%), radial-gradient(circle at 52.0% 31.0%, #38BDF8BD 0%, #38BDF86C 18.5%, transparent 60.5%), linear-gradient(135deg, #06B6D4 0%, #A78BFA 100%);
Mesh · 5 points
Botanical Signal
A deep botanical mesh for sustainability reports, outdoor products and modern natural identities.
#14532D#22C55E#D9F99D#FDE68A+1 more colors
background: radial-gradient(circle at 14.0% 18.0%, #14532DEB 0%, #14532D99 20.2%, transparent 56.9%), radial-gradient(circle at 83.0% 72.0%, #0F766EBD 0%, #0F766E71 20.2%, transparent 56.9%), radial-gradient(circle at 17.0% 77.0%, #FDE68ABD 0%, #FDE68A71 20.2%, transparent 56.9%), radial-gradient(circle at 85.0% 20.0%, #D9F99DBD 0%, #D9F99D71 20.2%, transparent 56.9%), radial-gradient(circle at 52.0% 31.0%, #22C55EBD 0%, #22C55E71 20.2%, transparent 56.9%), linear-gradient(135deg, #14532D 0%, #0F766E 100%);
Mesh · 7 points
Opal Garden
An opalescent garden with soft multidirectional color for beauty, culture and editorial storytelling.
#E9D5FF#FBCFE8#A5F3FC#FDE68A+3 more colors
background: radial-gradient(circle at 14.0% 18.0%, #E9D5FFEB 0%, #E9D5FF8E 15.8%, transparent 62.6%), radial-gradient(circle at 68.0% 54.0%, #C7D2FEBD 0%, #C7D2FE65 15.8%, transparent 62.6%), radial-gradient(circle at 46.0% 84.0%, #FED7AABD 0%, #FED7AA65 15.8%, transparent 62.6%), radial-gradient(circle at 83.0% 72.0%, #BBF7D0BD 0%, #BBF7D065 15.8%, transparent 62.6%), radial-gradient(circle at 17.0% 77.0%, #FDE68ABD 0%, #FDE68A65 15.8%, transparent 62.6%), radial-gradient(circle at 85.0% 20.0%, #A5F3FCBD 0%, #A5F3FC65 15.8%, transparent 62.6%), radial-gradient(circle at 52.0% 31.0%, #FBCFE8BD 0%, #FBCFE865 15.8%, transparent 62.6%), linear-gradient(135deg, #E9D5FF 0%, #C7D2FE 100%);
Mesh · 6 points
Coastal Clay
A coastal mix of mineral blue and warm clay for boutique hospitality and crafted product brands.
#0E7490#67E8F9#C084FC#FB923C+2 more colors
background: radial-gradient(circle at 14.0% 18.0%, #0E7490EB 0%, #0E749097 19.2%, transparent 58.3%), radial-gradient(circle at 46.0% 84.0%, #64748BBD 0%, #64748B6E 19.2%, transparent 58.3%), radial-gradient(circle at 83.0% 72.0%, #FDE68ABD 0%, #FDE68A6E 19.2%, transparent 58.3%), radial-gradient(circle at 17.0% 77.0%, #FB923CBD 0%, #FB923C6E 19.2%, transparent 58.3%), radial-gradient(circle at 85.0% 20.0%, #C084FCBD 0%, #C084FC6E 19.2%, transparent 58.3%), radial-gradient(circle at 52.0% 31.0%, #67E8F9BD 0%, #67E8F96E 19.2%, transparent 58.3%), linear-gradient(135deg, #0E7490 0%, #64748B 100%);
Mesh · 5 points
Iris Vapor
A luminous iris vapor for creative technology, immersive portfolios and digital art presentations.
#4F46E5#A855F7#EC4899#22D3EE+1 more colors
background: radial-gradient(circle at 14.0% 18.0%, #4F46E5EB 0%, #4F46E593 17.8%, transparent 61.9%), radial-gradient(circle at 83.0% 72.0%, #C4B5FDBD 0%, #C4B5FD6B 17.8%, transparent 61.9%), radial-gradient(circle at 17.0% 77.0%, #22D3EEBD 0%, #22D3EE6B 17.8%, transparent 61.9%), radial-gradient(circle at 85.0% 20.0%, #EC4899BD 0%, #EC48996B 17.8%, transparent 61.9%), radial-gradient(circle at 52.0% 31.0%, #A855F7BD 0%, #A855F76B 17.8%, transparent 61.9%), linear-gradient(135deg, #4F46E5 0%, #C4B5FD 100%);
Mesh · 8 points
Mineral Bloom
An eight-point mineral bloom balancing dark structure with precise accents for premium visual systems.
#334155#0F766E#D97706#E7E5E4+4 more colors
background: radial-gradient(circle at 14.0% 18.0%, #334155EB 0%, #3341559A 20.5%, transparent 57.6%), radial-gradient(circle at 32.0% 55.0%, #38BDF8BD 0%, #38BDF872 20.5%, transparent 57.6%), radial-gradient(circle at 68.0% 54.0%, #E879F9BD 0%, #E879F972 20.5%, transparent 57.6%), radial-gradient(circle at 46.0% 84.0%, #A3E635BD 0%, #A3E63572 20.5%, transparent 57.6%), radial-gradient(circle at 83.0% 72.0%, #64748BBD 0%, #64748B72 20.5%, transparent 57.6%), radial-gradient(circle at 17.0% 77.0%, #E7E5E4BD 0%, #E7E5E472 20.5%, transparent 57.6%), radial-gradient(circle at 85.0% 20.0%, #D97706BD 0%, #D9770672 20.5%, transparent 57.6%), radial-gradient(circle at 52.0% 31.0%, #0F766EBD 0%, #0F766E72 20.5%, transparent 57.6%), linear-gradient(135deg, #334155 0%, #38BDF8 100%);
Mesh · 6 points
After Rain
A spacious after-rain palette for climate products, data stories and reflective editorial pages.
#164E63#22D3EE#94A3B8#A7F3D0+2 more colors
background: radial-gradient(circle at 14.0% 18.0%, #164E63EB 0%, #164E6391 16.8%, transparent 63.4%), radial-gradient(circle at 46.0% 84.0%, #6366F1BD 0%, #6366F168 16.8%, transparent 63.4%), radial-gradient(circle at 83.0% 72.0%, #E0F2FEBD 0%, #E0F2FE68 16.8%, transparent 63.4%), radial-gradient(circle at 17.0% 77.0%, #A7F3D0BD 0%, #A7F3D068 16.8%, transparent 63.4%), radial-gradient(circle at 85.0% 20.0%, #94A3B8BD 0%, #94A3B868 16.8%, transparent 63.4%), radial-gradient(circle at 52.0% 31.0%, #22D3EEBD 0%, #22D3EE68 16.8%, transparent 63.4%), linear-gradient(135deg, #164E63 0%, #6366F1 100%);
Mesh · 7 points
Sunset Pollen
A warm, pollen-like sunset for festivals, fashion drops and expressive campaign landing pages.
#F97316#FACC15#FB7185#C084FC+3 more colors
background: radial-gradient(circle at 14.0% 18.0%, #F97316EB 0%, #F9731694 18.1%, transparent 61.2%), radial-gradient(circle at 68.0% 54.0%, #EC4899BD 0%, #EC48996B 18.1%, transparent 61.2%), radial-gradient(circle at 46.0% 84.0%, #FEF3C7BD 0%, #FEF3C76B 18.1%, transparent 61.2%), radial-gradient(circle at 83.0% 72.0%, #FDBA74BD 0%, #FDBA746B 18.1%, transparent 61.2%), radial-gradient(circle at 17.0% 77.0%, #C084FCBD 0%, #C084FC6B 18.1%, transparent 61.2%), radial-gradient(circle at 85.0% 20.0%, #FB7185BD 0%, #FB71856B 18.1%, transparent 61.2%), radial-gradient(circle at 52.0% 31.0%, #FACC15BD 0%, #FACC156B 18.1%, transparent 61.2%), linear-gradient(135deg, #F97316 0%, #EC4899 100%);
Mesh · 4 points
Lilac Tide
A four-point lilac tide with fluid transitions for personal brands and soft technology products.
#7C3AED#C4B5FD#F0ABFC#67E8F9
background: radial-gradient(circle at 14.0% 18.0%, #7C3AEDEB 0%, #7C3AED8F 16.1%, transparent 61.9%), radial-gradient(circle at 17.0% 77.0%, #67E8F9BD 0%, #67E8F966 16.1%, transparent 61.9%), radial-gradient(circle at 85.0% 20.0%, #F0ABFCBD 0%, #F0ABFC66 16.1%, transparent 61.9%), radial-gradient(circle at 52.0% 31.0%, #C4B5FDBD 0%, #C4B5FD66 16.1%, transparent 61.9%), linear-gradient(135deg, #7C3AED 0%, #67E8F9 100%);
Mesh · 9 points
Sea Glass Field
A wide nine-point sea-glass field for expansive brand canvases, exhibitions and atmospheric web backgrounds.
#0EA5E9#2DD4BF#A7F3D0#E0F2FE+5 more colors
background: radial-gradient(circle at 14.0% 18.0%, #0EA5E9EB 0%, #0EA5E98D 15.4%, transparent 64.1%), radial-gradient(circle at 62.0% 10.0%, #FBCFE8BD 0%, #FBCFE865 15.4%, transparent 64.1%), radial-gradient(circle at 32.0% 55.0%, #22D3EEBD 0%, #22D3EE65 15.4%, transparent 64.1%), radial-gradient(circle at 68.0% 54.0%, #FDE68ABD 0%, #FDE68A65 15.4%, transparent 64.1%), radial-gradient(circle at 46.0% 84.0%, #C4B5FDBD 0%, #C4B5FD65 15.4%, transparent 64.1%), radial-gradient(circle at 83.0% 72.0%, #94A3B8BD 0%, #94A3B865 15.4%, transparent 64.1%), radial-gradient(circle at 17.0% 77.0%, #E0F2FEBD 0%, #E0F2FE65 15.4%, transparent 64.1%), radial-gradient(circle at 85.0% 20.0%, #A7F3D0BD 0%, #A7F3D065 15.4%, transparent 64.1%), radial-gradient(circle at 52.0% 31.0%, #2DD4BFBD 0%, #2DD4BF65 15.4%, transparent 64.1%), linear-gradient(135deg, #0EA5E9 0%, #FBCFE8 100%);
Mesh · 5 points
Peach Terrain
A warm terrain of peach, gold and violet for friendly launches and narrative portfolio sections.
#FB7185#FDBA74#FDE68A#C084FC+1 more colors
background: radial-gradient(circle at 14.0% 18.0%, #FB7185EB 0%, #FB718596 18.7%, transparent 58.3%), radial-gradient(circle at 83.0% 72.0%, #60A5FABD 0%, #60A5FA6D 18.7%, transparent 58.3%), radial-gradient(circle at 17.0% 77.0%, #C084FCBD 0%, #C084FC6D 18.7%, transparent 58.3%), radial-gradient(circle at 85.0% 20.0%, #FDE68ABD 0%, #FDE68A6D 18.7%, transparent 58.3%), radial-gradient(circle at 52.0% 31.0%, #FDBA74BD 0%, #FDBA746D 18.7%, transparent 58.3%), linear-gradient(135deg, #FB7185 0%, #60A5FA 100%);
Mesh · 5 points
Signal Collision
A sharp five-point collision designed for launch moments, music visuals and high-energy digital campaigns.
#2563EB#F43F5E#FACC15#06B6D4+1 more colors
background: radial-gradient(circle at 10.0% 16.0%, #2563EBEB 0%, #2563EB9E 21.9%, transparent 56.9%), radial-gradient(circle at 66.0% 84.0%, #7C3AEDBD 0%, #7C3AED75 21.9%, transparent 56.9%), radial-gradient(circle at 88.0% 62.0%, #06B6D4BD 0%, #06B6D475 21.9%, transparent 56.9%), radial-gradient(circle at 62.0% 44.0%, #FACC15BD 0%, #FACC1575 21.9%, transparent 56.9%), radial-gradient(circle at 35.0% 29.0%, #F43F5EBD 0%, #F43F5E75 21.9%, transparent 56.9%), linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
Mesh · 6 points
Electric Flora
An electric botanical field for experimental identities, creative coding and cultural event graphics.
#22C55E#D946EF#06B6D4#F97316+2 more colors
background: radial-gradient(circle at 10.0% 16.0%, #22C55EEB 0%, #22C55E9B 20.9%, transparent 59.8%), radial-gradient(circle at 30.0% 73.0%, #8B5CF6BD 0%, #8B5CF672 20.9%, transparent 59.8%), radial-gradient(circle at 66.0% 84.0%, #A3E635BD 0%, #A3E63572 20.9%, transparent 59.8%), radial-gradient(circle at 88.0% 62.0%, #F97316BD 0%, #F9731672 20.9%, transparent 59.8%), radial-gradient(circle at 62.0% 44.0%, #06B6D4BD 0%, #06B6D472 20.9%, transparent 59.8%), radial-gradient(circle at 35.0% 29.0%, #D946EFBD 0%, #D946EF72 20.9%, transparent 59.8%), linear-gradient(135deg, #22C55E 0%, #8B5CF6 100%);
Mesh · 7 points
Plasma Field
A dark plasma field with controlled hot spots for gaming, entertainment and immersive hero backgrounds.
#09090B#7C3AED#DB2777#06B6D4+3 more colors
background: radial-gradient(circle at 10.0% 16.0%, #09090BEB 0%, #09090B9D 21.5%, transparent 61.2%), radial-gradient(circle at 87.0% 18.0%, #F43F5EBD 0%, #F43F5E74 21.5%, transparent 61.2%), radial-gradient(circle at 30.0% 73.0%, #2563EBBD 0%, #2563EB74 21.5%, transparent 61.2%), radial-gradient(circle at 66.0% 84.0%, #FDE047BD 0%, #FDE04774 21.5%, transparent 61.2%), radial-gradient(circle at 88.0% 62.0%, #06B6D4BD 0%, #06B6D474 21.5%, transparent 61.2%), radial-gradient(circle at 62.0% 44.0%, #DB2777BD 0%, #DB277774 21.5%, transparent 61.2%), radial-gradient(circle at 35.0% 29.0%, #7C3AEDBD 0%, #7C3AED74 21.5%, transparent 61.2%), linear-gradient(135deg, #09090B 0%, #F43F5E 100%);
Mesh · 8 points
Neon Weather
An eight-point weather system of bright color for future-facing products and motion-led campaigns.
#0EA5E9#A3E635#F43F5E#D946EF+4 more colors
background: radial-gradient(circle at 10.0% 16.0%, #0EA5E9EB 0%, #0EA5E999 20.2%, transparent 62.6%), radial-gradient(circle at 12.0% 53.0%, #FB7185BD 0%, #FB718571 20.2%, transparent 62.6%), radial-gradient(circle at 87.0% 18.0%, #6366F1BD 0%, #6366F171 20.2%, transparent 62.6%), radial-gradient(circle at 30.0% 73.0%, #14B8A6BD 0%, #14B8A671 20.2%, transparent 62.6%), radial-gradient(circle at 66.0% 84.0%, #FACC15BD 0%, #FACC1571 20.2%, transparent 62.6%), radial-gradient(circle at 88.0% 62.0%, #D946EFBD 0%, #D946EF71 20.2%, transparent 62.6%), radial-gradient(circle at 62.0% 44.0%, #F43F5EBD 0%, #F43F5E71 20.2%, transparent 62.6%), radial-gradient(circle at 35.0% 29.0%, #A3E635BD 0%, #A3E63571 20.2%, transparent 62.6%), linear-gradient(135deg, #0EA5E9 0%, #FB7185 100%);
Mesh · 4 points
Chromatic Rush
A fast diagonal rush of saturated color for sports, creator platforms and bold interface moments.
#FF2D95#6D28D9#0891B2#F59E0B
background: radial-gradient(circle at 10.0% 16.0%, #FF2D95EB 0%, #FF2D95A0 22.6%, transparent 56.2%), radial-gradient(circle at 88.0% 62.0%, #F59E0BBD 0%, #F59E0B77 22.6%, transparent 56.2%), radial-gradient(circle at 62.0% 44.0%, #0891B2BD 0%, #0891B277 22.6%, transparent 56.2%), radial-gradient(circle at 35.0% 29.0%, #6D28D9BD 0%, #6D28D977 22.6%, transparent 56.2%), linear-gradient(135deg, #FF2D95 0%, #F59E0B 100%);
Mesh · 5 points
Infrared Bloom
An infrared heat bloom for performance products, event branding and dramatic product storytelling.
#7F1D1D#EF4444#F97316#FACC15+1 more colors
background: radial-gradient(circle at 10.0% 16.0%, #7F1D1DEB 0%, #7F1D1D9C 21.2%, transparent 59%), radial-gradient(circle at 66.0% 84.0%, #DB2777BD 0%, #DB277773 21.2%, transparent 59%), radial-gradient(circle at 88.0% 62.0%, #FACC15BD 0%, #FACC1573 21.2%, transparent 59%), radial-gradient(circle at 62.0% 44.0%, #F97316BD 0%, #F9731673 21.2%, transparent 59%), radial-gradient(circle at 35.0% 29.0%, #EF4444BD 0%, #EF444473 21.2%, transparent 59%), linear-gradient(135deg, #7F1D1D 0%, #DB2777 100%);
Mesh · 6 points
Quantum Candy
A playful quantum palette for creator tools, youth products and experimental onboarding screens.
#22D3EE#F472B6#A78BFA#FDE047+2 more colors
background: radial-gradient(circle at 10.0% 16.0%, #22D3EEEB 0%, #22D3EE96 18.8%, transparent 61.9%), radial-gradient(circle at 30.0% 73.0%, #FB7185BD 0%, #FB71856D 18.8%, transparent 61.9%), radial-gradient(circle at 66.0% 84.0%, #34D399BD 0%, #34D3996D 18.8%, transparent 61.9%), radial-gradient(circle at 88.0% 62.0%, #FDE047BD 0%, #FDE0476D 18.8%, transparent 61.9%), radial-gradient(circle at 62.0% 44.0%, #A78BFABD 0%, #A78BFA6D 18.8%, transparent 61.9%), radial-gradient(circle at 35.0% 29.0%, #F472B6BD 0%, #F472B66D 18.8%, transparent 61.9%), linear-gradient(135deg, #22D3EE 0%, #FB7185 100%);
Mesh · 7 points
Sonic Aurora
A sonic seven-point aurora for audio products, live events and responsive stage visuals.
#1D4ED8#06B6D4#8B5CF6#EC4899+3 more colors
background: radial-gradient(circle at 10.0% 16.0%, #1D4ED8EB 0%, #1D4ED89A 20.5%, transparent 63.4%), radial-gradient(circle at 87.0% 18.0%, #F97316BD 0%, #F9731672 20.5%, transparent 63.4%), radial-gradient(circle at 30.0% 73.0%, #FACC15BD 0%, #FACC1572 20.5%, transparent 63.4%), radial-gradient(circle at 66.0% 84.0%, #22C55EBD 0%, #22C55E72 20.5%, transparent 63.4%), radial-gradient(circle at 88.0% 62.0%, #EC4899BD 0%, #EC489972 20.5%, transparent 63.4%), radial-gradient(circle at 62.0% 44.0%, #8B5CF6BD 0%, #8B5CF672 20.5%, transparent 63.4%), radial-gradient(circle at 35.0% 29.0%, #06B6D4BD 0%, #06B6D472 20.5%, transparent 63.4%), linear-gradient(135deg, #1D4ED8 0%, #F97316 100%);
Mesh · 9 points
Laser Garden
A nine-point laser garden that mixes organic color cues with a precise technological edge.
#052E16#22C55E#84CC16#06B6D4+5 more colors
background: radial-gradient(circle at 10.0% 16.0%, #052E16EB 0%, #052E169F 22.2%, transparent 60.5%), radial-gradient(circle at 48.0% 10.0%, #14B8A6BD 0%, #14B8A676 22.2%, transparent 60.5%), radial-gradient(circle at 12.0% 53.0%, #8B5CF6BD 0%, #8B5CF676 22.2%, transparent 60.5%), radial-gradient(circle at 87.0% 18.0%, #FB7185BD 0%, #FB718576 22.2%, transparent 60.5%), radial-gradient(circle at 30.0% 73.0%, #FDE047BD 0%, #FDE04776 22.2%, transparent 60.5%), radial-gradient(circle at 66.0% 84.0%, #D946EFBD 0%, #D946EF76 22.2%, transparent 60.5%), radial-gradient(circle at 88.0% 62.0%, #06B6D4BD 0%, #06B6D476 22.2%, transparent 60.5%), radial-gradient(circle at 62.0% 44.0%, #84CC16BD 0%, #84CC1676 22.2%, transparent 60.5%), radial-gradient(circle at 35.0% 29.0%, #22C55EBD 0%, #22C55E76 22.2%, transparent 60.5%), linear-gradient(135deg, #052E16 0%, #14B8A6 100%);
Mesh · 5 points
Midnight Spectrum
A dark spectrum for premium digital brands, cinematic case studies and deep interface backgrounds.
#020617#1E3A8A#6D28D9#BE185D+1 more colors
background: radial-gradient(circle at 10.0% 16.0%, #020617EB 0%, #02061799 19.8%, transparent 58.3%), radial-gradient(circle at 66.0% 84.0%, #0891B2BD 0%, #0891B270 19.8%, transparent 58.3%), radial-gradient(circle at 88.0% 62.0%, #BE185DBD 0%, #BE185D70 19.8%, transparent 58.3%), radial-gradient(circle at 62.0% 44.0%, #6D28D9BD 0%, #6D28D970 19.8%, transparent 58.3%), radial-gradient(circle at 35.0% 29.0%, #1E3A8ABD 0%, #1E3A8A70 19.8%, transparent 58.3%), linear-gradient(135deg, #020617 0%, #0891B2 100%);
Mesh · 8 points
Heatmap Dream
A vivid heatmap dream for data stories, AI products and visualizations that need immediate impact.
#1D4ED8#06B6D4#22C55E#FACC15+4 more colors
background: radial-gradient(circle at 10.0% 16.0%, #1D4ED8EB 0%, #1D4ED89B 20.9%, transparent 64.1%), radial-gradient(circle at 12.0% 53.0%, #7C3AEDBD 0%, #7C3AED72 20.9%, transparent 64.1%), radial-gradient(circle at 87.0% 18.0%, #DB2777BD 0%, #DB277772 20.9%, transparent 64.1%), radial-gradient(circle at 30.0% 73.0%, #EF4444BD 0%, #EF444472 20.9%, transparent 64.1%), radial-gradient(circle at 66.0% 84.0%, #F97316BD 0%, #F9731672 20.9%, transparent 64.1%), radial-gradient(circle at 88.0% 62.0%, #FACC15BD 0%, #FACC1572 20.9%, transparent 64.1%), radial-gradient(circle at 62.0% 44.0%, #22C55EBD 0%, #22C55E72 20.9%, transparent 64.1%), radial-gradient(circle at 35.0% 29.0%, #06B6D4BD 0%, #06B6D472 20.9%, transparent 64.1%), linear-gradient(135deg, #1D4ED8 0%, #7C3AED 100%);
Mesh · 6 points
Prism Current
A signature six-color current connecting the original Gradialy palette with the new Mesh editor.
#5146E5#06B6D4#22C55E#FACC15+2 more colors
background: radial-gradient(circle at 10.0% 16.0%, #5146E5EB 0%, #5146E598 19.5%, transparent 61.2%), radial-gradient(circle at 30.0% 73.0%, #EC4899BD 0%, #EC48996F 19.5%, transparent 61.2%), radial-gradient(circle at 66.0% 84.0%, #FF6957BD 0%, #FF69576F 19.5%, transparent 61.2%), radial-gradient(circle at 88.0% 62.0%, #FACC15BD 0%, #FACC156F 19.5%, transparent 61.2%), radial-gradient(circle at 62.0% 44.0%, #22C55EBD 0%, #22C55E6F 19.5%, transparent 61.2%), radial-gradient(circle at 35.0% 29.0%, #06B6D4BD 0%, #06B6D46F 19.5%, transparent 61.2%), linear-gradient(135deg, #5146E5 0%, #EC4899 100%);
Gradient guide
How to choose CSS gradients for web design
Updated · Curated by Fold Now Studio
Choose linear when a layout needs direction, radial when it needs a focal light source, and Mesh when several colors should create depth and atmosphere. The right choice depends on the job the background must do, not on visual novelty alone.
| Type | Visual character | Best use |
|---|---|---|
| Linear | Directional and predictable | Page backgrounds, banners, buttons and wide sections |
| Radial | Focused light or glow | Product imagery, CTA areas, cards and focal points |
| Mesh | Organic, multi-point depth | Hero sections, brand worlds, campaigns and expressive UI |
What is a CSS gradient?
A CSS gradient is a browser-generated image that blends two or more colors. It works anywhere CSS accepts an image, usually in background or background-image, without a separate bitmap file.
What is the difference between linear, radial and Mesh gradients?
Linear gradients blend colors along an axis. Radial gradients expand from a center point. Mesh-style gradients combine several positioned radial layers to create an organic composition with multiple color sources.
How does a Mesh gradient work in CSS?
CSS has no universal mesh-gradient() function. Gradialy creates the effect from layered radial gradients. Each point controls a color and position, while softness and color reach shape the blend.
Where do Mesh gradients work best?
Mesh gradients suit hero backgrounds, launch campaigns, portfolio covers, presentation slides and brand-led interfaces. Use calm compositions behind text and dynamic layouts where the gradient is the main visual.
How do I keep text readable over a gradient?
Test with real copy, maintain sufficient contrast and keep active color areas away from key text. A subtle overlay can stabilize readability without flattening the composition.
Can I copy and edit these examples?
Yes. Copy the CSS, save an example to the browser collection, or open it in Gradialy. The editor restores its colors and settings for customization and export.
Do CSS gradients affect performance?
Static CSS gradients are usually lightweight because the browser renders them without downloading a large image. Complex animation and many layers need more rendering work, so test motion on mobile.
How are the examples selected?
Fold Now Studio curates the gallery around practical design roles, color relationships and readability. Calm, Organic and Dynamic Mesh systems complement linear and radial options instead of relying on random color pairs.
Created and reviewed by Fold Now Studio Tomasz Panek. All rights reserved.Visit Fold Now Studio