Jak używać
- W sekcji Typ wybierz Liniowy, Radialny lub Stożkowy.
- W sekcji Punkty koloru ustaw kolory za pomocą pól HEX lub selektorów koloru.
- Przeciągnij znaczniki na pasku, aby ustawić położenie punktów koloru. Podgląd i kod aktualizują się na bieżąco.
- W razie potrzeby kliknij + Dodaj punkt koloru.
- Kliknij Kopiuj CSS, aby skopiować deklarację background, albo Kopiuj wartość, aby skopiować samą funkcję gradientu. Skrót Ctrl+Shift+C lub Cmd+Shift+C działa bez zaznaczonego tekstu.
Przykłady
Przyciemnienie zdjęcia w nagłówku
Dane wejściowe
Liniowy, 0° · #000000 na 0%, krycie 80% · #000000 na 100%, krycie 0%
Wynik
background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
Tło sekcji z ofertą
Dane wejściowe
Radialny, Elipsa, lewy górny róg · #E0F2FE na 0% · #2563EB na 60% · #172554 na 100%
Wynik
background: radial-gradient(ellipse at top left, #E0F2FE 0%, #2563EB 60%, #172554 100%);
Kolorowe tło okrągłej odznaki
Dane wejściowe
Stożkowy, 45°, środek · #F97316 na 0% · #A855F7 na 50% · #F97316 na 100%
Wynik
background: conic-gradient(from 45deg at center, #F97316 0%, #A855F7 50%, #F97316 100%);
Wskazówki
- Dobierz dokładne kolory i sprawdź kontrast w narzędziu Kody kolorów HTML.
- Wypróbuj gradient na stronie w narzędziu Edytor HTML.
FAQ
Dlaczego gradient nie powtarza się po zaznaczeniu opcji Powtarzany?
Jeśli ostatni punkt koloru znajduje się na 100%, powtarzanie nie daje widocznego efektu. Przesuń go niżej, na przykład na 25%.
Czy mogę wpisać kolor w formacie rgb() lub hsl()?
Pola koloru przyjmują tylko HEX: #RGB, #RGBA, #RRGGBB lub #RRGGBBAA, także bez znaku #. Możesz też użyć selektora koloru.
Dlaczego kod CSS nie zmienia się po wpisaniu wartości?
Przy błędnej wartości pole zostaje oznaczone, a kod i podgląd zachowują ostatni poprawny gradient. Kąt musi być liczbą całkowitą od 0 do 360, a położenie i krycie liczbą całkowitą od 0 do 100.
Czy ustawienia gradientu zostają zapisane po zamknięciu strony?
Ostatni poprawny gradient jest zapisywany w localStorage i przywracany przy kolejnej wizycie. Kliknij Resetuj, aby usunąć zapis i wrócić do ustawień domyślnych.