Generator gradientów CSS: do czego służy
Pisanie gradientu ręcznie wymusza edycję CSS, zapisanie i odświeżanie, aż kąt będzie wyglądał dobrze. Ten generator daje podgląd na żywo: wybierz typ, kąt i punkty zatrzymania kolorów, obserwuj wynik i skopiuj gotowy do produkcji kod CSS, bez prefiksów i zgodny ze wszystkimi obecnymi przeglądarkami.
Generator gradientów CSS: jak korzystać
- Wybierz gradient liniowy albo radialny.
- Dostosuj kąt, jeśli jest liniowy.
- Dodaj punkty zatrzymania koloru i przesuń ich pozycję.
- Skopiuj wygenerowany CSS bezpośrednio do arkusza stylów.
Najczęściej zadawane pytania
Jak działają kąty gradientów w CSS?
0deg wskazuje do góry, a kąty rosną zgodnie z ruchem wskazówek zegara, więc 90deg biegnie od lewej do prawej, a 180deg z góry na dół. To inaczej niż w konwencji matematycznej i często myli.
Dlaczego mój gradient wygląda matowo pośrodku?
Bo interpolacja w sRGB przechodzi przez odbarwiony punkt pośredni, zwłaszcza między kolorami komplementarnymi. Dodanie pośredniego punktu zatrzymania albo użycie interpolacji oklch w nowoczesnych przeglądarkach to rozwiązuje.
Czy nadal potrzebne są prefiksy przeglądarek?
Nie. linear-gradient i radial-gradient bez prefiksu działają od lat we wszystkich obecnych przeglądarkach. Prefiksy tylko zwiększają wagę pliku.
Czy gradient można animować?
Nie bezpośrednio przez transition, ponieważ background-image się nie interpoluje. Typowa sztuczka to animowanie background-position na większym gradiencie albo użycie zarejestrowanych właściwości niestandardowych przez @property.