Generator gradientów CSS
Darmowy generator gradientów CSS online, podgląd w czasie rzeczywistym
Typy gradientów CSS
Gradienty liniowe przechodzą między kolorami wzdłuż linii prostej zdefiniowanej przez kąt lub kierunek. Gradienty radialne przechodzą od punktu centralnego na zewnątrz w kształcie kołowym lub eliptycznym. Oba obsługują wiele punktów kolorystycznych dla złożonych przejść między trzema lub więcej kolorami.
Jak utworzyć gradient CSS
Wybierz typ gradientu (liniowy lub radialny), wybierz kolory początkowy i końcowy oraz dostosuj kąt dla gradientów liniowych. Narzędzie generuje kod CSS natychmiast. Skopiuj CSS i wklej do arkusza stylów jako właściwość background lub background-image.
▶Czy mogę użyć więcej niż dwóch kolorów w gradiencie?
Tak, gradienty CSS obsługują nieograniczoną liczbę punktów kolorystycznych. Dodaj dodatkowe kolory, modyfikując wygenerowany kod CSS z dodatkowymi wartościami kolorów oddzielonymi przecinkami.
▶Jakie jest wsparcie przeglądarek dla gradientów CSS?
Gradienty CSS są obsługiwane we wszystkich nowoczesnych przeglądarkach. Dla starszych przeglądarek może być potrzebny prefiks dostawcy (-webkit-gradient) lub jednorodny kolor awaryjny.
▶Czy mogę używać przezroczystości w gradientach?
Tak. Użyj wartości kolorów rgba() lub hsla(), aby uwzględnić przezroczystość. Na przykład linear-gradient(135deg, rgba(255,0,0,0.5), transparent) tworzy półprzezroczysty czerwony gradient.