Przejdź do treści

Generator gradientów CSS

Zaprojektuj gradient liniowy, radialny lub stożkowy z kilku kolorów, ustaw kąt i położenie, skopiuj gotowy kod CSS i zobacz podgląd na żywo.

Umieść to narzędzie na swojej stronie

Bezpłatnie, bez rejestracji. Widżet pokazuje na dole napis „Narzędzie udostępnia AMKBIT.pl”.

Strona demonstracyjna

Rodzaje gradientów w CSS

  • linear-gradient(kąt, kolory) — przejście wzdłuż linii; 0deg to w górę, 90deg w prawo, 180deg w dół.
  • radial-gradient(kształt at położenie, kolory) — od środka na zewnątrz.
  • conic-gradient(from kąt, kolory) — dookoła punktu, jak wykres kołowy.

Położenie w procentach określa, gdzie kolor jest „czysty”. Dwa kolory w tym samym miejscu (np. 50% i 50%) dają ostrą granicę zamiast przejścia — tak robi się paski.

Kod zawiera pierwszą linię background z jednolitym kolorem jako zapas dla bardzo starych przeglądarek. Gradienty CSS są obsługiwane przez wszystkie współczesne przeglądarki bez przedrostków.

Pamiętaj o czytelności: tekst na gradiencie powinien mieć wystarczający kontrast na całej szerokości — sprawdzisz go w konwerterze kolorów.

Przykłady

Pasy

linear-gradient(90deg, #e00 0% 50%, #fff 50% 100%) — dwa ostre pasy (zapis z dwoma położeniami na kolor).

Najczęstsze pytania

Czy gradient spowalnia stronę?

Nie — gradient CSS jest rysowany przez przeglądarkę i nie wymaga pobierania obrazu, więc zwykle jest szybszy niż grafika tła.

Poradniki

Programowanie i tworzenie stronSzybka makieta strony — rem, gradienty, placeholdery i Lorem ipsumZestaw prostych narzędzi do budowania prototypu strony: jednostki rem zamiast pikseli, gradienty CSS bez grafik, obrazki zastępcze i tekst testowy…Programowanie i tworzenie stronCienie i głębia w projektowaniu stron — jak używać box-shadow z wyczuciemJak cienie budują hierarchię na stronie, ile poziomów „wysokości” wystarczy, dlaczego dwa cienie wyglądają lepiej niż jeden, jak zachować cienie w…Programowanie i tworzenie stronZaokrąglone rogi w CSS — border-radius w praktyceKarty, przyciski, koło i kapsuła. Jak spójnie używać promieni w projekcie strony.Programowanie i tworzenie stronKolory w CSS: HEX, RGB, HSL i OKLCH — który zapis wybraćCo oznacza #1e88e5, jak działa przezroczystość w rgba, dlaczego projektanci lubią HSL, czym jest nowy zapis OKLCH i jak zbudować spójną paletę…

Wynik ma charakter pomocniczy. Przy ważnych decyzjach (finansowych, technicznych, zdrowotnych) sprawdź go niezależnie. Zasady korzystania.