Generator gradientów CSS
Zaprojektuj gradient i skopiuj gotowy kod CSS.
- Natychmiast
- Za darmo
- Prywatnie (przetwarzane lokalnie)
- Bez rejestracji
Stwórz idealny gradient bez pisania ani linii CSS
Gradienty są wszędzie we współczesnym designie: tła sekcji hero, przyciski, karty, ozdobne teksty. Ten generator pozwala komponować je wizualnie — kolory, pozycje, kąt, typ — i kopiować czysty kod CSS gotowy do produkcji.
-
Wybierz typ
Liniowy dla kierunkowego przejścia, radialny dla centralnej poświaty, stożkowy dla efektów koła lub wykresu kołowego.
-
Dostosuj kolory i pozycje
Zmieniaj każdy kolor w selektorze, przesuwaj pozycję suwakiem, dodawaj do 6 punktów. Przycisk Losowy podpowiada harmonijne zestawienia.
-
Skopiuj CSS
Kod aktualizuje się w czasie rzeczywistym. Jedno kliknięcie i jest w schowku.
Trzy funkcje, trzy geometrie
| Funkcja | Geometria | Typowe zastosowanie |
|---|---|---|
| linear-gradient(kąt, …) | Skierowana linia prosta | Tła, przyciski, nakładki |
| radial-gradient(circle, …) | Koncentryczne okręgi | Poświaty, reflektory, winiety |
| conic-gradient(from kąt, …) | Obrót wokół środka | Wykresy kołowe, koła barw, animowane obramowania |
Wskazówki dla udanych gradientów
- Trzymaj się sąsiednich (analogicznych) odcieni dla miękkiego efektu; przeciwstawne odcienie przechodzą przez matowe szarości.
- Dla gradientowego tekstu połącz background-clip: text z color: transparent.
- Na dużych powierzchniach dodaj delikatny szum, aby uniknąć widocznych pasów (bandingu).
- Pamiętaj o kontraście: tekst na gradiencie musi pozostać czytelny w całym zakresie kolorów.
Wygenerowany kod używa kolorów szesnastkowych dla maksymalnej zgodności. W projekcie możesz zastąpić je zmiennymi CSS (var(--moj-kolor)).
Najczęstsze pytania
Czym różnią się linear, radial i conic?
linear-gradient biegnie po linii prostej pod zadanym kątem; radial-gradient promieniuje od środka na zewnątrz; conic-gradient obraca się wokół środka jak koło barw. Wszystkie trzy przyjmują te same listy kolorów.
Ilu kolorów mogę użyć?
Narzędzie obsługuje do 6 punktów, co pokrywa niemal wszystkie potrzeby. W czystym CSS liczba jest nieograniczona, ale powyżej 4–5 kolorów gradient szybko staje się trudny do opanowania.
Co oznaczają procenty obok kolorów?
To pozycja punktu wzdłuż osi gradientu: 0 % na początku, 100 % na końcu. Dwa bliskie punkty tworzą ostre przejście, dwa odległe — łagodne przenikanie.
Czy wygenerowany kod działa we wszystkich przeglądarkach?
linear-gradient i radial-gradient są wspierane wszędzie od lat. conic-gradient jest dostępny we wszystkich nowoczesnych przeglądarkach (Chrome 69+, Firefox 83+, Safari 12.1+).
Jak animować gradient CSS?
Gradientów nie da się animować bezpośrednio, ale dwie techniki działają dobrze: animowanie background-position na powiększonym gradiencie (background-size: 200 %) lub animowanie kolorów przez właściwości niestandardowe zarejestrowane w @property.