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%);
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%);
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%);
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 StudioUstawienia cookies