Wybierz kolory i kierunek, aby wygenerować CSS linear-gradient. Podgląd aktualizuje się na żywo. Skopiuj CSS, gdy będziesz gotowy. Działa w przeglądarce.
0%
100%
background: linear-gradient(to right, #3b82f6, #8b5cf6);
O generatorze gradientów CSS
To narzędzie buduje CSS linear-gradient na podstawie wybranego kierunku i kolorów. Możesz dodać wiele punktów kolorów. Podgląd i CSS aktualizują się w miarę zmian. Skopiuj fragment kodu do swojego arkusza stylów.
Jak używać
- Wybierz kierunek (np. do prawej, 45deg).
- Wybierz kolory za pomocą selektora lub wpisz wartość hex. W razie potrzeby dodaj więcej kolorów.
- Skopiuj wygenerowany CSS i wklej go do swojego projektu.
Najczęściej zadawane pytania
Czy mogę dodać więcej niż dwa kolory?
Tak. Użyj Dodaj kolor, aby dodać kolejne punkty. Możesz je zmieniać i usuwać. Każdy punkt może mieć pozycję (np. 50%).
Czy mój gradient jest wysyłany na serwer?
Nie. CSS jest generowany w przeglądarce.
Jakie przeglądarki obsługują linear-gradient?
Wszystkie nowoczesne przeglądarki obsługują linear-gradient. Narzędzie generuje standardowy CSS; dodaj prefiksy vendor, jeśli potrzebujesz wsparcia dla starszych przeglądarek.