Gradienty liniowe, radialne i Mesh
Porównuj trzy użyteczne typy: od kierunkowych przejść dwóch kolorów po warstwowe, wielopunktowe kompozycje Mesh.
Gradienty CSSPrzykłady.
Poznaj 160 dopracowanych gradientów liniowych, radialnych i Mesh do stron, interfejsów, sekcji hero i materiałów marki. Skopiuj gotowy CSS albo otwórz przykład w Gradialy, aby zmienić kolory, kompozycję, ruch i ziarno.
Kopiuj CSS lub edytuj wizualnie
Użyj gotowej deklaracji, zapisz ulubiony projekt albo otwórz kompletne ustawienia w Gradialy.
Wybrane do prawdziwych projektów
Każda paleta powstała z myślą o landing page, produktach cyfrowych, portfolio, prezentacjach i markach.
Liniowy
Aurora Pulse
Aurora Pulse to dopracowany gradient CSS do sekcji hero, interfejsów i kart UI, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#5146E5#FF6957
background: linear-gradient(135deg, #5146E5 0%, #FF6957 100%);
Liniowy
Soft Peach
Soft Peach to pastelowy gradient CSS do sekcji hero, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#FFE6D5#F47C7C
background: linear-gradient(135deg, #FFE6D5 0%, #F47C7C 100%);
Liniowy
Neon Glass
Neon Glass to neonowy gradient CSS do sekcji hero. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#0A0312#00D4FF
background: linear-gradient(135deg, #0A0312 0%, #00D4FF 100%);
Liniowy
Ocean Mist
Ocean Mist to pastelowy gradient CSS do sekcji hero, interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#75E6DA#189AB4
background: linear-gradient(135deg, #75E6DA 0%, #189AB4 100%);
Liniowy
Velvet Night
Velvet Night to ciemny gradient CSS do sekcji hero, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#16001E#7F00FF
background: linear-gradient(135deg, #16001E 0%, #7F00FF 100%);
Liniowy
Citrus Glow
Citrus Glow to dopracowany gradient CSS do sekcji hero, interfejsów i kart UI, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#F6C453#FF5F6D
background: linear-gradient(135deg, #F6C453 0%, #FF5F6D 100%);
Liniowy
Lavender Fog
Lavender Fog to pastelowy gradient CSS do interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#E0C3FC#8EC5FC
background: linear-gradient(135deg, #E0C3FC 0%, #8EC5FC 100%);
Liniowy
Deep Ocean
Deep Ocean to ciemny gradient CSS do sekcji hero. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#000428#004E92
background: linear-gradient(135deg, #000428 0%, #004E92 100%);
Liniowy
Electric Berry
Electric Berry to neonowy gradient CSS do interfejsów i kart UI, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#FC466B#3F5EFB
background: linear-gradient(135deg, #FC466B 0%, #3F5EFB 100%);
Liniowy
Mint Cream
Mint Cream to pastelowy gradient CSS do materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#D4FC79#96E6A1
background: linear-gradient(135deg, #D4FC79 0%, #96E6A1 100%);
Liniowy
Midnight Signal
Midnight Signal to neonowy gradient CSS do stron internetowych i projektów wizualnych. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#141E30#00C9FF
background: linear-gradient(135deg, #141E30 0%, #00C9FF 100%);
Liniowy
Sunset Coral
Sunset Coral to dopracowany gradient CSS do sekcji hero, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#FF9966#FF5E62
background: linear-gradient(135deg, #FF9966 0%, #FF5E62 100%);
Liniowy
Skyline Wash
Skyline Wash to pastelowy gradient CSS do interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#89F7FE#66A6FF
background: linear-gradient(135deg, #89F7FE 0%, #66A6FF 100%);
Liniowy
Royal Ink
Royal Ink to ciemny gradient CSS do materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#020024#8E2DE2
background: linear-gradient(135deg, #020024 0%, #8E2DE2 100%);
Liniowy
Rose Quartz
Rose Quartz to pastelowy gradient CSS do sekcji hero. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#FBD3E9#BB377D
background: linear-gradient(135deg, #FBD3E9 0%, #BB377D 100%);
Liniowy
Fresh Lime
Fresh Lime to dopracowany gradient CSS do interfejsów i kart UI, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#A8FF78#78FFD6
background: linear-gradient(135deg, #A8FF78 0%, #78FFD6 100%);
Liniowy
Plasma Wave
Plasma Wave to neonowy gradient CSS do sekcji hero. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#F857A6#FF5858
background: linear-gradient(135deg, #F857A6 0%, #FF5858 100%);
Liniowy
Graphite Blue
Graphite Blue to ciemny gradient CSS do interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#232526#414345
background: linear-gradient(135deg, #232526 0%, #414345 100%);
Liniowy
Mango Blush
Mango Blush to dopracowany gradient CSS do sekcji hero, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#FDC830#F37335
background: linear-gradient(135deg, #FDC830 0%, #F37335 100%);
Liniowy
Ice Violet
Ice Violet to pastelowy gradient CSS do interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#A1C4FD#C2E9FB
background: linear-gradient(135deg, #A1C4FD 0%, #C2E9FB 100%);
Liniowy
Cosmic Violet
Cosmic Violet to neonowy gradient CSS do materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#20002C#CBB4D4
background: linear-gradient(135deg, #20002C 0%, #CBB4D4 100%);
Liniowy
Cotton Candy
Cotton Candy to pastelowy gradient CSS do sekcji hero, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#FFDEE9#B5FFFC
background: linear-gradient(135deg, #FFDEE9 0%, #B5FFFC 100%);
Liniowy
Spring Field
Spring Field to dopracowany gradient CSS do interfejsów i kart UI, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#00B09B#96C93D
background: linear-gradient(135deg, #00B09B 0%, #96C93D 100%);
Liniowy
Laser Dusk
Laser Dusk to neonowy gradient CSS do sekcji hero. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#360033#0B8793
background: linear-gradient(135deg, #360033 0%, #0B8793 100%);
Liniowy
Ember Rose
Ember Rose to dopracowany gradient CSS do sekcji hero, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#B24592#F15F79
background: linear-gradient(135deg, #B24592 0%, #F15F79 100%);
Liniowy
Carbon Slate
Carbon Slate to ciemny gradient CSS do interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#0F2027#2C5364
background: linear-gradient(135deg, #0F2027 0%, #2C5364 100%);
Liniowy
SaaS Indigo
SaaS Indigo to dopracowany gradient CSS do sekcji hero, interfejsów i kart UI, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#4338CA#22D3EE
background: linear-gradient(135deg, #4338CA 0%, #22D3EE 100%);
Liniowy
Signal Lime
Signal Lime to dopracowany gradient CSS do interfejsów i kart UI, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#101828#84CC16
background: linear-gradient(135deg, #101828 0%, #84CC16 100%);
Liniowy
Editorial Peach
Editorial Peach to pastelowy gradient CSS do sekcji hero, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#FFD6BA#F97316
background: linear-gradient(135deg, #FFD6BA 0%, #F97316 100%);
Liniowy
Cloud Console
Cloud Console to pastelowy gradient CSS do interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#E0F2FE#60A5FA
background: linear-gradient(135deg, #E0F2FE 0%, #60A5FA 100%);
Liniowy
Obsidian Mint
Obsidian Mint to ciemny gradient CSS do interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#06141B#2DD4BF
background: linear-gradient(135deg, #06141B 0%, #2DD4BF 100%);
Liniowy
Solar Pitch
Solar Pitch to dopracowany gradient CSS do sekcji hero, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#F59E0B#EF4444
background: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
Liniowy
Neon Command
Neon Command to neonowy gradient CSS do interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#0F172A#22D3EE
background: linear-gradient(135deg, #0F172A 0%, #22D3EE 100%);
Liniowy
Quiet Sage
Quiet Sage to pastelowy gradient CSS do interfejsów i kart UI, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#ECFCCB#86EFAC
background: linear-gradient(135deg, #ECFCCB 0%, #86EFAC 100%);
Liniowy
Studio Rose
Studio Rose to dopracowany gradient CSS do sekcji hero, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#BE185D#FB7185
background: linear-gradient(135deg, #BE185D 0%, #FB7185 100%);
Liniowy
Navy Ledger
Navy Ledger to ciemny gradient CSS do interfejsów i kart UI, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#020617#1D4ED8
background: linear-gradient(135deg, #020617 0%, #1D4ED8 100%);
Liniowy
Prism Pop
Prism Pop to neonowy gradient CSS do sekcji hero, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#7C3AED#FACC15
background: linear-gradient(135deg, #7C3AED 0%, #FACC15 100%);
Liniowy
Aqua Ledger
Aqua Ledger to dopracowany gradient CSS do sekcji hero, interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#0EA5E9#14B8A6
background: linear-gradient(135deg, #0EA5E9 0%, #14B8A6 100%);
Liniowy
Lilac Paper
Lilac Paper to pastelowy gradient CSS do interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#F5D0FE#C4B5FD
background: linear-gradient(135deg, #F5D0FE 0%, #C4B5FD 100%);
Liniowy
Copper Signal
Copper Signal to ciemny gradient CSS do materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#1C1917#D97706
background: linear-gradient(135deg, #1C1917 0%, #D97706 100%);
Liniowy
Cyber Orchid
Cyber Orchid to neonowy gradient CSS do sekcji hero. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#111827#38BDF8
background: linear-gradient(135deg, #111827 0%, #38BDF8 100%);
Liniowy
Fresh Onboarding
Fresh Onboarding to pastelowy gradient CSS do interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#BAE6FD#A7F3D0
background: linear-gradient(135deg, #BAE6FD 0%, #A7F3D0 100%);
Liniowy
Brand Flame
Brand Flame to dopracowany gradient CSS do sekcji hero, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#DC2626#F97316
background: linear-gradient(135deg, #DC2626 0%, #F97316 100%);
Liniowy
Deep Violet Desk
Deep Violet Desk to ciemny gradient CSS do interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#12002F#4C1D95
background: linear-gradient(135deg, #12002F 0%, #4C1D95 100%);
Liniowy
Morning Product
Morning Product to pastelowy gradient CSS do sekcji hero, interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#FEF3C7#FDBA74
background: linear-gradient(135deg, #FEF3C7 0%, #FDBA74 100%);
Liniowy
Electric Cyan
Electric Cyan to neonowy gradient CSS do interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#164E63#A3E635
background: linear-gradient(135deg, #164E63 0%, #A3E635 100%);
Liniowy
Royal Product
Royal Product to dopracowany gradient CSS do sekcji hero, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#312E81#DB2777
background: linear-gradient(135deg, #312E81 0%, #DB2777 100%);
Liniowy
Glass Meadow
Glass Meadow to pastelowy gradient CSS do interfejsów i kart UI, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#D9F99D#67E8F9
background: linear-gradient(135deg, #D9F99D 0%, #67E8F9 100%);
Liniowy
Carbon Pulse
Carbon Pulse to neonowy gradient CSS do stron internetowych i projektów wizualnych. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#030712#A855F7
background: linear-gradient(135deg, #030712 0%, #A855F7 100%);
Liniowy
Coral Interface
Coral Interface to pastelowy gradient CSS do interfejsów i kart UI, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#FED7AA#FB7185
background: linear-gradient(135deg, #FED7AA 0%, #FB7185 100%);
Liniowy
Pacific Hero
Pacific Hero to dopracowany gradient CSS do sekcji hero, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#0369A1#0F766E
background: linear-gradient(135deg, #0369A1 0%, #0F766E 100%);
Liniowy
Plum Finance
Plum Finance to ciemny gradient CSS do interfejsów i kart UI, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#1E1B4B#7E22CE
background: linear-gradient(135deg, #1E1B4B 0%, #7E22CE 100%);
Liniowy
Candy System
Candy System to pastelowy gradient CSS do interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#FBCFE8#BFDBFE
background: linear-gradient(135deg, #FBCFE8 0%, #BFDBFE 100%);
Liniowy
Laser Aurora
Laser Aurora to neonowy gradient CSS do sekcji hero. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#0B1120#7C3AED
background: linear-gradient(135deg, #0B1120 0%, #7C3AED 100%);
Liniowy
Amber Utility
Amber Utility to dopracowany gradient CSS do interfejsów i kart UI, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#78350F#F59E0B
background: linear-gradient(135deg, #78350F 0%, #F59E0B 100%);
Liniowy
Snow Pixel
Snow Pixel to pastelowy gradient CSS do interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#F8FAFC#CBD5E1
background: linear-gradient(135deg, #F8FAFC 0%, #CBD5E1 100%);
Liniowy
Raspberry Hero
Raspberry Hero to dopracowany gradient CSS do sekcji hero, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#9F1239#F43F5E
background: linear-gradient(135deg, #9F1239 0%, #F43F5E 100%);
Liniowy
Data Lagoon
Data Lagoon to ciemny gradient CSS do interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#082F49#0E7490
background: linear-gradient(135deg, #082F49 0%, #0E7490 100%);
Liniowy
Soft Signal
Soft Signal to pastelowy gradient CSS do sekcji hero. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#E9D5FF#FBCFE8
background: linear-gradient(135deg, #E9D5FF 0%, #FBCFE8 100%);
Liniowy
Neon Citrus
Neon Citrus to neonowy gradient CSS do materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#1A2E05#FDE047
background: linear-gradient(135deg, #1A2E05 0%, #FDE047 100%);
Liniowy
Ink Horizon
Ink Horizon to ciemny gradient CSS do sekcji hero, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#020617#334155
background: linear-gradient(135deg, #020617 0%, #334155 100%);
Liniowy
Sky Product
Sky Product to dopracowany gradient CSS do sekcji hero, interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#38BDF8#6366F1
background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
Liniowy
Velvet Citrus
Velvet Citrus to dopracowany gradient CSS do sekcji hero, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#7C2D12#FDBA74
background: linear-gradient(135deg, #7C2D12 0%, #FDBA74 100%);
Liniowy
Arctic Mint
Arctic Mint to pastelowy gradient CSS do interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#CCFBF1#E0F2FE
background: linear-gradient(135deg, #CCFBF1 0%, #E0F2FE 100%);
Liniowy
Magenta Console
Magenta Console to neonowy gradient CSS do interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#111827#60A5FA
background: linear-gradient(135deg, #111827 0%, #60A5FA 100%);
Liniowy
Founder Blue
Founder Blue to dopracowany gradient CSS do sekcji hero, interfejsów i kart UI, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#1D4ED8#7C3AED
background: linear-gradient(135deg, #1D4ED8 0%, #7C3AED 100%);
Liniowy
Honey Pastel
Honey Pastel to pastelowy gradient CSS do materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#FEF08A#FDBA74
background: linear-gradient(135deg, #FEF08A 0%, #FDBA74 100%);
Liniowy
Slate Aurora
Slate Aurora to ciemny gradient CSS do interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#0F172A#475569
background: linear-gradient(135deg, #0F172A 0%, #475569 100%);
Liniowy
Fuchsia Drift
Fuchsia Drift to neonowy gradient CSS do sekcji hero, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#701A75#FB7185
background: linear-gradient(135deg, #701A75 0%, #FB7185 100%);
Liniowy
Teal Studio
Teal Studio to dopracowany gradient CSS do interfejsów i kart UI, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#0F766E#2DD4BF
background: linear-gradient(135deg, #0F766E 0%, #2DD4BF 100%);
Liniowy
Peach Dashboard
Peach Dashboard to pastelowy gradient CSS do interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#FFEDD5#FDBA74
background: linear-gradient(135deg, #FFEDD5 0%, #FDBA74 100%);
Liniowy
Night Market
Night Market to ciemny gradient CSS do sekcji hero, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#18181B#BE123C
background: linear-gradient(135deg, #18181B 0%, #BE123C 100%);
Liniowy
Neon Ocean
Neon Ocean to neonowy gradient CSS do sekcji hero, interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#042F2E#8B5CF6
background: linear-gradient(135deg, #042F2E 0%, #8B5CF6 100%);
Liniowy
Calm Commerce
Calm Commerce to pastelowy gradient CSS do interfejsów i kart UI, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#DBEAFE#C7D2FE
background: linear-gradient(135deg, #DBEAFE 0%, #C7D2FE 100%);
Liniowy
Ruby Launch
Ruby Launch to dopracowany gradient CSS do sekcji hero, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#991B1B#F97316
background: linear-gradient(135deg, #991B1B 0%, #F97316 100%);
Liniowy
Developer Mist
Developer Mist to ciemny gradient CSS do interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#111827#64748B
background: linear-gradient(135deg, #111827 0%, #64748B 100%);
Liniowy
Pastel Lens
Pastel Lens to pastelowy gradient CSS do sekcji hero, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#FDE68A#C4B5FD
background: linear-gradient(135deg, #FDE68A 0%, #C4B5FD 100%);
Liniowy
Signal Violet
Signal Violet to neonowy gradient CSS do interfejsów i kart UI, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#312E81#22D3EE
background: linear-gradient(135deg, #312E81 0%, #22D3EE 100%);
Liniowy
Forest Product
Forest Product to dopracowany gradient CSS do sekcji hero, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#14532D#84CC16
background: linear-gradient(135deg, #14532D 0%, #84CC16 100%);
Liniowy
Rose Interface
Rose Interface to pastelowy gradient CSS do interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#FFE4E6#FDA4AF
background: linear-gradient(135deg, #FFE4E6 0%, #FDA4AF 100%);
Liniowy
Midnight Iris
Midnight Iris to ciemny gradient CSS do sekcji hero. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#0C0A1F#6D28D9
background: linear-gradient(135deg, #0C0A1F 0%, #6D28D9 100%);
Liniowy
Cyan Brand
Cyan Brand to dopracowany gradient CSS do sekcji hero, interfejsów i kart UI, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#0891B2#2563EB
background: linear-gradient(135deg, #0891B2 0%, #2563EB 100%);
Liniowy
Apricot Glass
Apricot Glass to pastelowy gradient CSS do interfejsów i kart UI, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#FED7AA#FEF3C7
background: linear-gradient(135deg, #FED7AA 0%, #FEF3C7 100%);
Liniowy
Terminal Glow
Terminal Glow to neonowy gradient CSS do interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#020617#22C55E
background: linear-gradient(135deg, #020617 0%, #22C55E 100%);
Liniowy
Purple Revenue
Purple Revenue to dopracowany gradient CSS do sekcji hero, interfejsów i kart UI, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#581C87#2563EB
background: linear-gradient(135deg, #581C87 0%, #2563EB 100%);
Liniowy
Soft Clay
Soft Clay to pastelowy gradient CSS do materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#F5E0D3#D6A184
background: linear-gradient(135deg, #F5E0D3 0%, #D6A184 100%);
Liniowy
Black Cherry
Black Cherry to ciemny gradient CSS do sekcji hero, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#1F0712#BE185D
background: linear-gradient(135deg, #1F0712 0%, #BE185D 100%);
Liniowy
Neon Peach
Neon Peach to neonowy gradient CSS do sekcji hero, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#7C2D12#FDE047
background: linear-gradient(135deg, #7C2D12 0%, #FDE047 100%);
Liniowy
Interface Dawn
Interface Dawn to pastelowy gradient CSS do sekcji hero, interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#F0FDFA#93C5FD
background: linear-gradient(135deg, #F0FDFA 0%, #93C5FD 100%);
Liniowy
Blue Authority
Blue Authority to dopracowany gradient CSS do sekcji hero, interfejsów i kart UI, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#1E3A8A#0EA5E9
background: linear-gradient(135deg, #1E3A8A 0%, #0EA5E9 100%);
Liniowy
Mauve Portfolio
Mauve Portfolio to pastelowy gradient CSS do sekcji hero, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#E9D5FF#A78BFA
background: linear-gradient(135deg, #E9D5FF 0%, #A78BFA 100%);
Liniowy
Dark Emerald
Dark Emerald to ciemny gradient CSS do materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#022C22#059669
background: linear-gradient(135deg, #022C22 0%, #059669 100%);
Liniowy
Neon Radar
Neon Radar to neonowy gradient CSS do interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#0F172A#A3E635
background: linear-gradient(135deg, #0F172A 0%, #A3E635 100%);
Liniowy
Product Bloom
Product Bloom to pastelowy gradient CSS do sekcji hero, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#FBCFE8#F97316
background: linear-gradient(135deg, #FBCFE8 0%, #F97316 100%);
Liniowy
Cool Slate UI
Cool Slate UI to ciemny gradient CSS do interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#1E293B#0F766E
background: linear-gradient(135deg, #1E293B 0%, #0F766E 100%);
Liniowy
Golden Studio
Golden Studio to dopracowany gradient CSS do sekcji hero, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#92400E#FBBF24
background: linear-gradient(135deg, #92400E 0%, #FBBF24 100%);
Liniowy
Dream App
Dream App to pastelowy gradient CSS do interfejsów i kart UI. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#DDD6FE#A5F3FC
background: linear-gradient(135deg, #DDD6FE 0%, #A5F3FC 100%);
Liniowy
Infrared Night
Infrared Night to neonowy gradient CSS do sekcji hero. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#111827#A855F7
background: linear-gradient(135deg, #111827 0%, #A855F7 100%);
Liniowy
Trust Mint
Trust Mint to dopracowany gradient CSS do interfejsów i kart UI, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#065F46#5EEAD4
background: linear-gradient(135deg, #065F46 0%, #5EEAD4 100%);
Liniowy
Velvet Cloud
Velvet Cloud to pastelowy gradient CSS do sekcji hero, materiałów marki. Sprawdzi się jako tło strony, akcent wizualny albo punkt startowy do dalszej edycji w Gradialy.
#F5D0FE#FDE68A
background: linear-gradient(135deg, #F5D0FE 0%, #FDE68A 100%);
Kołowy
Solar Focus
Ciepła poświata radialna tworząca naturalny punkt skupienia za wizualizacją produktu, nagłówkiem premiery lub znakiem marki.
#FFF4C7#F97316
background: radial-gradient(circle at 50% 46%, #FFF4C7 0%, #F97316 100%);
Kołowy
Arctic Halo
Chłodny gradient centralny do ekranów onboardingu, czystych dashboardów i paneli, które potrzebują głębi bez wizualnego szumu.
#E8FAFF#2F80ED
background: radial-gradient(circle at 48% 42%, #E8FAFF 0%, #2F80ED 100%);
Kołowy
Rose Spotlight
Miękki różowy reflektor do okładek editorialowych, wstępów portfolio i ekspresyjnych stron lifestyle.
#FFD9E8#C026D3
background: radial-gradient(circle at 38% 36%, #FFD9E8 0%, #C026D3 100%);
Kołowy
Midnight Beacon
Skupiona cyjanowa poświata do ciemnych sekcji technologicznych, produktów data i kontrastowych wyróżnień funkcji.
#23D5FF#060817
background: radial-gradient(circle at 62% 38%, #23D5FF 0%, #060817 100%);
Kołowy
Citrus Lens
Wyraziste cytrusowe centrum dodające energii bannerom kampanii, premierom produktów i grafikom social media.
#FFF2A8#F43F5E
background: radial-gradient(circle at 54% 54%, #FFF2A8 0%, #F43F5E 100%);
Kołowy
Mint Portal
Spokojny miętowy portal do interfejsów wellness, marek zrównoważonych i przestronnych teł produktowych.
#D7FFF0#0F766E
background: radial-gradient(circle at 50% 50%, #D7FFF0 0%, #0F766E 100%);
Kołowy
Violet Orbit
Przesunięta fioletowa orbita pozostawiająca miejsce na tekst i nadająca kompozycji wyrazisty charakter.
#F0D8FF#5B21B6
background: radial-gradient(circle at 72% 30%, #F0D8FF 0%, #5B21B6 100%);
Kołowy
Coral Bloom
Przyjazny koralowy rozbłysk do produktów beauty, stron hospitality i ciepłych modułów editorialowych.
#FFE4D6#FB5A61
background: radial-gradient(circle at 45% 62%, #FFE4D6 0%, #FB5A61 100%);
Kołowy
Ocean Core
Głębokie oceaniczne centrum do interfejsów travel, marek morskich i sekcji produktowych opartych na obrazie.
#9FF3FF#075985
background: radial-gradient(circle at 58% 48%, #9FF3FF 0%, #075985 100%);
Kołowy
Amber Signal
Bursztynowy sygnał o mocnym charakterze do opakowań premium, wydarzeń i zdecydowanych sekcji CTA.
#FFE8A3#9A3412
background: radial-gradient(circle at 30% 42%, #FFE8A3 0%, #9A3412 100%);
Kołowy
Cloud Halo
Niemal biała poświata do subtelnych powierzchni aplikacji, sekcji cenowych i spokojnych przejść na stronie.
#FFFFFF#A5B4FC
background: radial-gradient(circle at 50% 38%, #FFFFFF 0%, #A5B4FC 100%);
Kołowy
Emerald Focus
Skupione szmaragdowe światło do dashboardów finansowych, raportów ESG i ciemnych interfejsów premium.
#A7F3D0#064E3B
background: radial-gradient(circle at 66% 64%, #A7F3D0 0%, #064E3B 100%);
Kołowy
Magenta Eclipse
Nasycone magentowe zaćmienie do platform muzycznych, kampanii eventowych i immersyjnych okładek cyfrowych.
#FF5ACD#240046
background: radial-gradient(circle at 46% 44%, #FF5ACD 0%, #240046 100%);
Kołowy
Blue Aperture
Kontrolowana niebieska apertura do produktów B2B, wiarygodnych stron SaaS i teł prezentacji.
#C7E8FF#1E3A8A
background: radial-gradient(circle at 52% 50%, #C7E8FF 0%, #1E3A8A 100%);
Kołowy
Peach Aura
Miękka brzoskwiniowa aura do marek osobistych, historii portfolio i przystępnych prezentacji produktu.
#FFF0E5#F97373
background: radial-gradient(circle at 40% 48%, #FFF0E5 0%, #F97373 100%);
Kołowy
Neon Reactor
Energetyczny reaktor do interfejsów gamingowych, kreatywnych technologii i futurystycznych kampanii.
#8BFFEA#6D00FF
background: radial-gradient(circle at 50% 52%, #8BFFEA 0%, #6D00FF 100%);
Kołowy
Slate Glow
Powściągliwa łupkowa poświata do narzędzi developerskich, paneli administracyjnych i profesjonalnych interfejsów.
#CBD5E1#172033
background: radial-gradient(circle at 63% 35%, #CBD5E1 0%, #172033 100%);
Kołowy
Lavender Center
Zbalansowane lawendowe centrum do produktów społecznościowych, lekkich dashboardów i przyjaznych ekranów aplikacji.
#F2E8FF#8B5CF6
background: radial-gradient(circle at 50% 50%, #F2E8FF 0%, #8B5CF6 100%);
Kołowy
Ruby Core
Rubinowy punkt skupienia do marek luksusowych, projektów kulturalnych i dramatycznych layoutów editorialowych.
#FFB4C2#7F1D1D
background: radial-gradient(circle at 52% 58%, #FFB4C2 0%, #7F1D1D 100%);
Kołowy
Aqua Pulse
Świeży turkusowy puls pod mockupy interfejsów, screeny produktowe i czyste teksty premierowe.
#C5FFF8#0891B2
background: radial-gradient(circle at 36% 50%, #C5FFF8 0%, #0891B2 100%);
Kołowy
Golden Halo
Dopracowana złota poświata do nagród, usług premium i wyrazistych marek eksperckich.
#FFF7CC#D97706
background: radial-gradient(circle at 50% 34%, #FFF7CC 0%, #D97706 100%);
Kołowy
Graphite Lens
Grafitowa soczewka do produktów technicznych, interfejsów security i monochromatycznych systemów wizualnych.
#94A3B8#020617
background: radial-gradient(circle at 44% 40%, #94A3B8 0%, #020617 100%);
Kołowy
Lime Orbit
Przesunięta limonkowa orbita do aktywnych marek, produktów sportowych i niekonwencjonalnych akcentów UI.
#ECFCCB#3F6212
background: radial-gradient(circle at 68% 52%, #ECFCCB 0%, #3F6212 100%);
Kołowy
Plum Spotlight
Głęboki śliwkowy reflektor do studiów kreatywnych, case studies i nastrojowych sekcji funkcji.
#E9D5FF#581C87
background: radial-gradient(circle at 34% 62%, #E9D5FF 0%, #581C87 100%);
Mesh · 5 punktów
Quiet Spectrum
Zbalansowany pięciopunktowy Mesh do dopracowanych stron produktowych, spokojnych teł aplikacji i nowoczesnych okładek prezentacji.
#6657FF#FF7183#77D8FF#FFD36B+1 więcej kolorów
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 punktów
Editorial Bloom
Miękki editorialowy Mesh z szerokimi przejściami do portfolio, magazynów i historii lifestyle.
#F7C7D9#FFD7A8#B8C6FF#FFF2D7+2 więcej kolorów
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 punktów
Alpine Haze
Chłodna alpejska paleta w symetrycznym układzie do komunikacji wellness, architektury i marek zrównoważonych.
#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 punktów
Studio Linen
Spokojny neutralny Mesh zastępujący płaski beż subtelną głębią w interfejsach editorialowych i portfolio studiów.
#F6E9DF#D7C7B8#C8D9D2#F0C6C6+1 więcej kolorów
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 punktów
Soft Horizon
Siedmiopunktowy horyzont o spokojnym rytmie kolorów do przestronnych hero i wizualnego storytellingu.
#93C5FD#DDD6FE#FBCFE8#FED7AA+3 więcej kolorów
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 punktów
Porcelain Light
Niemal biały Mesh do powierzchni UI potrzebujących głębi przy zachowaniu czytelności i wizualnego spokoju.
#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 punktów
Nordic Aurora
Kontrolowana paleta zorzy do marek inspirowanych Skandynawią, identyfikacji konferencji i dużych teł stron.
#A5F3FC#C4B5FD#F9A8D4#99F6E4+4 więcej kolorów
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 punktów
Garden Paper
Botaniczny Mesh o papierowym charakterze do produktów naturalnych, konceptów opakowań i delikatnych kampanii.
#D9F99D#FDE68A#FBCFE8#BBF7D0+1 więcej kolorów
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 punktów
Product Dawn
Czytelny sześciopunktowy świt zaprojektowany do oprawy screenów produktu bez konkurowania z detalami interfejsu.
#FDBA74#FCA5A5#C4B5FD#93C5FD+2 więcej kolorów
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 punktów
Clear Atmosphere
Minimalna trzypunktowa atmosfera do dokumentacji, onboardingu i stron produktowych z dużą ilością treści.
#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 punktów
Gentle Current
Delikatny siedmiokolorowy nurt do optymistycznych marek, produktów edukacyjnych i przyjaznych landing pages.
#BFDBFE#A7F3D0#FDE68A#FBCFE8+3 więcej kolorów
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 punktów
Mineral Wash
Uporządkowana dziewięciopunktowa paleta mineralna do architektury, materiałów i stonowanych systemów premium.
#94A3B8#CBD5E1#A8A29E#D6D3D1+5 więcej kolorów
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 punktów
Liquid Orchard
Organiczna paleta sadu z żywymi przenikaniami do food, hospitality i energetycznych kampanii sezonowych.
#84CC16#FACC15#FB7185#2DD4BF+1 więcej kolorów
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 punktów
Coral Lagoon
Tropikalny sześciopunktowy Mesh łączący wodę, koral i ciepłe światło dla marek travel i leisure.
#06B6D4#38BDF8#FB7185#FDBA74+2 więcej kolorów
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 punktów
Botanical Signal
Głęboki botaniczny Mesh do raportów ESG, produktów outdoorowych i nowoczesnych naturalnych identyfikacji.
#14532D#22C55E#D9F99D#FDE68A+1 więcej kolorów
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 punktów
Opal Garden
Opalizujący ogród z miękkim wielokierunkowym kolorem do beauty, kultury i editorialowego storytellingu.
#E9D5FF#FBCFE8#A5F3FC#FDE68A+3 więcej kolorów
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 punktów
Coastal Clay
Nadmorskie połączenie mineralnego błękitu i ciepłej gliny do butikowego hospitality i marek rzemieślniczych.
#0E7490#67E8F9#C084FC#FB923C+2 więcej kolorów
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 punktów
Iris Vapor
Świetlista irysowa mgła do kreatywnych technologii, immersyjnych portfolio i prezentacji sztuki cyfrowej.
#4F46E5#A855F7#EC4899#22D3EE+1 więcej kolorów
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 punktów
Mineral Bloom
Ośmiopunktowy mineralny rozbłysk łączący ciemną strukturę z precyzyjnymi akcentami w systemach premium.
#334155#0F766E#D97706#E7E5E4+4 więcej kolorów
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 punktów
After Rain
Przestronna paleta po deszczu do produktów klimatycznych, data stories i refleksyjnych stron editorialowych.
#164E63#22D3EE#94A3B8#A7F3D0+2 więcej kolorów
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 punktów
Sunset Pollen
Ciepły zachód przypominający pyłek do festiwali, premier modowych i ekspresyjnych landing pages.
#F97316#FACC15#FB7185#C084FC+3 więcej kolorów
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 punktów
Lilac Tide
Czteropunktowy lawendowy przypływ z płynnymi przejściami do marek osobistych i delikatnych produktów technologicznych.
#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 punktów
Sea Glass Field
Szerokie dziewięciopunktowe pole sea glass do rozległych teł marek, wystaw i atmosferycznych stron internetowych.
#0EA5E9#2DD4BF#A7F3D0#E0F2FE+5 więcej kolorów
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 punktów
Peach Terrain
Ciepły teren brzoskwini, złota i fioletu do przyjaznych premier i narracyjnych sekcji portfolio.
#FB7185#FDBA74#FDE68A#C084FC+1 więcej kolorów
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 punktów
Signal Collision
Ostre pięciopunktowe zderzenie do premier, wizualizacji muzycznych i energetycznych kampanii cyfrowych.
#2563EB#F43F5E#FACC15#06B6D4+1 więcej kolorów
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 punktów
Electric Flora
Elektryczne botaniczne pole do eksperymentalnych identyfikacji, creative coding i grafik wydarzeń kulturalnych.
#22C55E#D946EF#06B6D4#F97316+2 więcej kolorów
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 punktów
Plasma Field
Ciemne pole plazmy z kontrolowanymi gorącymi punktami do gamingu, rozrywki i immersyjnych hero.
#09090B#7C3AED#DB2777#06B6D4+3 więcej kolorów
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 punktów
Neon Weather
Ośmiopunktowy system pogodowy jaskrawych kolorów do futurystycznych produktów i kampanii opartych na ruchu.
#0EA5E9#A3E635#F43F5E#D946EF+4 więcej kolorów
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 punktów
Chromatic Rush
Szybki diagonalny przepływ nasyconych kolorów do sportu, platform twórców i mocnych momentów UI.
#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 punktów
Infrared Bloom
Rozbłysk podczerwonego ciepła do produktów performance, brandingu wydarzeń i dramatycznego storytellingu.
#7F1D1D#EF4444#F97316#FACC15+1 więcej kolorów
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 punktów
Quantum Candy
Zabawna kwantowa paleta do narzędzi dla twórców, produktów młodzieżowych i eksperymentalnego onboardingu.
#22D3EE#F472B6#A78BFA#FDE047+2 więcej kolorów
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 punktów
Sonic Aurora
Soniczna siedmiopunktowa zorza do produktów audio, wydarzeń live i responsywnych wizualizacji scenicznych.
#1D4ED8#06B6D4#8B5CF6#EC4899+3 więcej kolorów
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 punktów
Laser Garden
Dziewięciopunktowy laserowy ogród łączący organiczne sygnały kolorystyczne z technologiczną precyzją.
#052E16#22C55E#84CC16#06B6D4+5 więcej kolorów
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 punktów
Midnight Spectrum
Ciemne spektrum do cyfrowych marek premium, filmowych case studies i głębokich teł interfejsów.
#020617#1E3A8A#6D28D9#BE185D+1 więcej kolorów
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 punktów
Heatmap Dream
Wyrazisty heatmap dream do data stories, produktów AI i wizualizacji wymagających natychmiastowego efektu.
#1D4ED8#06B6D4#22C55E#FACC15+4 więcej kolorów
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 punktów
Prism Current
Charakterystyczny sześciokolorowy nurt łączący pierwotną paletę Gradialy z nowym edytorem Mesh.
#5146E5#06B6D4#22C55E#FACC15+2 więcej kolorów
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%);
Przewodnik po gradientach
Jak wybierać gradienty CSS do stron
Aktualizacja: · Opracowanie: Fold Now Studio
Wybierz gradient liniowy, gdy układ potrzebuje kierunku, radialny, gdy chcesz zbudować punkt światła, a Mesh, gdy kilka kolorów ma stworzyć głębię i atmosferę. Dobry wybór wynika z roli tła, a nie wyłącznie z efektowności.
| Typ | Charakter wizualny | Najlepsze zastosowania |
|---|---|---|
| Liniowy | Kierunkowy i przewidywalny | Tła stron, banery, przyciski i szerokie sekcje |
| Radialny | Skupione światło lub poświata | Produkty, CTA, karty i punkty skupienia |
| Mesh | Organiczna, wielopunktowa głębia | Sekcje hero, światy marek, kampanie i ekspresyjne UI |
Czym jest gradient CSS?
Gradient CSS to obraz generowany przez przeglądarkę, który łączy dwa lub więcej kolorów. Działa wszędzie tam, gdzie CSS przyjmuje obraz, zwykle we właściwości background lub background-image, bez osobnego pliku bitmapowego.
Czym różnią się gradienty liniowe, radialne i Mesh?
Liniowe mieszają kolory wzdłuż osi. Radialne rozchodzą się od punktu centralnego. Mesh łączy kilka pozycjonowanych warstw radialnych i tworzy organiczną kompozycję z wieloma źródłami koloru.
Jak działa gradient Mesh w CSS?
CSS nie ma uniwersalnej funkcji mesh-gradient(). Gradialy buduje efekt z warstw radialnych. Każdy punkt ma kolor i pozycję, a miękkość oraz zasięg sterują sposobem łączenia.
Gdzie najlepiej sprawdzają się gradienty Mesh?
Mesh dobrze działa w tłach hero, kampaniach, okładkach portfolio, prezentacjach i interfejsach marek. Spokojne układy stosuj pod tekstem, a dynamiczne tam, gdzie tło jest głównym elementem.
Jak zachować czytelność tekstu na gradiencie?
Testuj tło z prawdziwą treścią, zachowaj kontrast i odsuń aktywne obszary koloru od tekstu. Delikatny overlay może ustabilizować czytelność bez spłaszczania kompozycji.
Czy mogę kopiować i edytować te przykłady?
Tak. Skopiuj CSS, zapisz przykład w kolekcji albo otwórz go w Gradialy. Edytor przywróci kolory i ustawienia do dalszej edycji i eksportu.
Czy gradienty CSS wpływają na wydajność?
Statyczne gradienty są zwykle lekkie, bo przeglądarka renderuje je bez pobierania dużego obrazu. Złożone animacje i wiele warstw wymagają więcej pracy, dlatego testuj ruch na mobile.
Jak wybierane są gradienty do galerii?
Fold Now Studio opracowuje kolekcję według realnych zastosowań, relacji kolorystycznych i czytelności. Spokojne, organiczne i dynamiczne układy Mesh uzupełniają gradienty liniowe i radialne zamiast przypadkowych par kolorów.
Stworzone i zweryfikowane przez Fold Now Studio Tomasz Panek. Wszelkie prawa zastrzeżone.Odwiedź Fold Now Studio