O tym narzędziu
Twórz piękne liniowe i promieniowe gradienty CSS za pomocą edytora wizualnego. Wybierz kolory, dostosuj przystanki, zmień kierunek lub kąt i zobacz aktualizację podglądu na żywo w czasie rzeczywistym. Skopiuj wygenerowany kod CSS — łącznie z prefiksami dostawców dla starszych przeglądarek — i wklej go bezpośrednio do arkusza stylów.
Często zadawane pytania
- Czy gradienty CSS działają we wszystkich przeglądarkach?
- Nowoczesne gradienty CSS (gradient liniowy, gradient radialny) są obsługiwane we wszystkich obecnych przeglądarkach, w tym Chrome, Firefox, Safari i Edge. Narzędzie może opcjonalnie generować przedrostki -webkit- dla starszych wersji przeglądarek.
- Czy mogę tworzyć gradienty wielokolorowe?
- Tak. Dodaj tyle przystanków koloru, ile potrzebujesz. Możesz także dostosować położenie każdego przystanku, aby kontrolować, gdzie kolory się mieszają. Pozwala to na tworzenie złożonych gradientów tęczy, zachodu słońca lub niestandardowych gradientów marki.
- Jaka jest różnica między gradientami liniowymi i radialnymi?
- Gradienty liniowe przechodzą kolory wzdłuż linii prostej (od góry do dołu, od lewej do prawej, po przekątnej lub pod dowolnym kątem). Gradienty promieniste przenoszą kolory na zewnątrz od punktu środkowego, tworząc kształt okrągły lub eliptyczny.
- Czy mogę użyć gradientu jako tła tekstu?
- Tak. Użyj klipu tła: tekst z opcją -webkit-text-fill-color: przezroczysty, aby zastosować gradient do tekstu. Wygenerowany CSS zapewnia definicję gradientu — połącz ją z tymi właściwościami, aby uzyskać tekst gradientu.