Generator gradientów CSS
Czym jest gradient CSS?
Gradienty CSS umożliwiają wyświetlanie płynnych przejść między dwoma lub więcej kolorami bez użycia plików graficznych. Wyróżniamy trzy typy: linear-gradient (wzdłuż prostej linii), radial-gradient (promieniujący z punktu centralnego) i conic-gradient (obracający się wokół punktu centralnego). Gradienty są używane do tła, przycisków, nakładek i elementów dekoracyjnych.
Jak używać generatora gradientów CSS
-
Wybierz ustawienie wstępne z próbek lub skonfiguruj własny gradient.
-
Wybierz typ gradientu: linear, radial lub conic.
-
Dostosuj kąt (dla linear/conic) lub kształt (dla radial).
-
Edytuj punkty zatrzymania — zmieniaj kolory i pozycje (0–100%).
-
Dodawaj lub usuwaj punkty zatrzymania według potrzeb.
-
Skopiuj CSS i wklej go do arkusza stylów.
Często Zadawane Pytania
Jak się robi przezroczysty gradient? Użyj wartości kolorów rgba() lub hsla() z kanałem alfa 0 dla pełnej przezroczystości. Na przykład, punkt koloru rgba(0,0,0,0) to całkowicie przezroczysty czarny, przydatny do efektów zanikania na obrazach.
Jak utworzyć twardy punkt zatrzymania koloru (bez przejścia)? Umieść dwa punkty zatrzymania koloru w tej samej pozycji — jeden kończący się i jeden zaczynający się w tym punkcie. Na przykład, red 50%, blue 50% tworzy natychmiastową zmianę z czerwonego na niebieski w połowie bez przejścia gradientu.
Jakie przeglądarki obsługują gradient stożkowy? Gradient stożkowy jest obsługiwany we wszystkich nowoczesnych przeglądarkach (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). Nie jest obsługiwany w Internet Explorer.
Czy mogę użyć wielu gradientów na tym samym elemencie? Tak. CSS background akceptuje listę warstw oddzielonych przecinkami. Możesz nakładać gradienty, łączyć je z obrazami tła i kontrolować niezależnie pozycję i rozmiar każdej warstwy.
Keywords: generator gradientu CSS, gradient liniowy, gradient radialny, gradient stożkowy, generator tła CSS, selektor kolorów gradientu, narzędzie do gradientów CSS