Generator Gradient CSS - Linear, Radial Gradienty

Generator Gradient CSS - zanim policzysz

Bez generatora

Piszesz CSS ręcznie i zgadujesz kolory
Nie widzisz efektu dopóki nie odświeżysz strony
Mylisz się w składni linear-gradient
Dobieranie kolorów "na oko" wygląda amatorsko

Z generatorem

Wybierasz 2 kolory z palety - podgląd na żywo
Ustawiasz kierunek (góra, dół, skos, radialny)
Dostajesz gotowy kod CSS do skopiowania
Eksperymentujesz w sekundy, nie minuty

Jak działa obliczenie?

    background: linear-gradient(kierunek, kolor1, kolor2);

    background: radial-gradient(circle, kolor1, kolor2);

Linear (liniowy): Przejście kolorów w linii prostej. Kierunek: to top, to right, to bottom right, 45deg, 135deg itp.

Radial (promieniowy): Przejście od środka na zewnątrz (lub odwrotnie). Kształt: circle (koło) lub ellipse (elipsa).

Popularne kombinacje gradientów

Nazwa	Kolory	Kod CSS
Zachód słońca	#FF6B6B - #FFE66D	linear-gradient(to right, #FF6B6B, #FFE66D)
Ocean	#2193b0 - #6dd5ed	linear-gradient(to right, #2193b0, #6dd5ed)
Las	#134E5E - #71B280	linear-gradient(to right, #134E5E, #71B280)
Neon	#FC466B - #3F5EFB	linear-gradient(135deg, #FC466B, #3F5EFB)
Ciemny	#0f0c29 - #302b63	linear-gradient(to right, #0f0c29, #302b63)

Często pytacie

Co to jest gradient CSS?

Płynne przejście między dwoma lub więcej kolorami jako tło elementu. Nie potrzebujesz obrazka - przeglądarka renderuje gradient z kodu CSS. Lżejsze niż JPG/PNG i skalowalne na każdy rozmiar.

Linear vs radial - jaki wybrać?

Linear - przejście w linii prostej (góra-dół, lewo-prawo, po skosie). Najczęstszy - tła sekcji, bannery, przyciski. Radial - przejście od środka na zewnątrz. Efekt "spotlight" lub "glow". Do avatarów, ikon, efektów specjalnych.

Czy gradient działa na wszystkich przeglądarkach?

Tak - linear-gradient i radial-gradient są obsługiwane przez wszystkie nowoczesne przeglądarki (Chrome, Firefox, Safari, Edge). Nie potrzebujesz prefiksów (-webkit-, -moz-) od ~2013 roku.

Jak dodać gradient na tekst (nie tło)?

background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent; To hack CSS - tło przycina się do kształtu tekstu. Działa w Chrome, Firefox, Safari. Efektowne na nagłówkach.

Czy mogę mieć więcej niż 2 kolory?

Tak - linear-gradient(to right, #FF0000, #00FF00, #0000FF) da gradient czerwony-zielony-niebieski. Możesz dodać dowolną liczbę kolorów ze "stopami" (np. #FF0000 30%, #00FF00 60%).

Jak zrobić animowany gradient?

Użyj background-size: 200% 200% z animacją CSS. Gradient jest 2x większy niż element i przesuwa się w pętli. Efekt "tęczowego" tła. Może obciążać GPU na słabszych urządzeniach.