Generator gradientów CSS
Zbuduj gradient na oko i skopiuj CSS.
Przeciągnij uchwyt, aby przesunąć punkt, albo kliknij pasek, żeby go dodać. Uchwyty można też przesuwać klawiszami strzałek.
Punkty koloru
- %
- %
- %
Działa w przeglądarce. Nic, co wpiszesz, nie jest nigdzie wysyłane.
- Przeciągnij, aby ustawić punkty
- Liniowy, radialny i stożkowy
- 8 gotowych ustawień
Jak zrobić gradient CSS
- Wybierz gotowe ustawienie, albo ustaw kolor każdego punktu.
- Przeciągaj uchwyty na pasku, a kliknięcie paska dodaje nowy punkt.
- Skopiuj CSS i wklej go do swojego arkusza stylów.
Porównanie typów gradientu
| Typ | Jak się rozchodzi | Funkcja CSS |
|---|---|---|
| Liniowy | Wzdłuż prostej linii pod kątem | linear-gradient() |
| Radialny | Od punktu centralnego na zewnątrz | radial-gradient() |
| Stożkowy | Wokół punktu centralnego, jak koło kolorów | conic-gradient() |
Obsługa w przeglądarkach według typu gradientu
| Typ gradientu | Wymaga co najmniej |
|---|---|
| Liniowy i radialny | Każdej aktualnej przeglądarki, nawet IE10 z prefiksem |
| Stożkowy | Chrome 69, Firefox 83, Safari 12.1 |
CSS wygenerowany na tej stronie zawsze zaczyna się od zwykłej linii background-color, więc przeglądarka, która nie potrafi narysować gradientu, i tak pokaże kolor pierwszego punktu zamiast pustego pola.
Wskazówki na płynniejsze gradienty
- Dodaj trzeci punkt pośrodku, żeby gradient wyglądał jak dwa kolory przenikające się przez trzeci, zamiast płaskiego przejścia dwóch barw.
- Aby uzyskać ostrą krawędź zamiast przenikania, nadaj dwóm sąsiednim punktom tę samą pozycję.
- 0deg biegnie z dołu do góry, a 90deg z lewej do prawej. Dodaj 180 do dowolnego kąta, aby odwrócić kierunek gradientu bez ponownego wpisywania każdego punktu.
- Dopasuj kształt radialny do pola: koło dla elementów kwadratowych, elipsa dla szerokich, żeby gradient nie wyglądał na rozciągnięty.
Generator gradientów CSS: najczęstsze pytania
Jak zrobić gradient w CSS?
Ustaw właściwość background na funkcję gradientu, na przykład background: linear-gradient(90deg, #ff7e5f, #feb47b). Pierwsza wartość to kierunek, potem następują kolory, każdy z opcjonalną pozycją.
Jaka jest różnica między gradientem liniowym, radialnym i stożkowym?
Gradient liniowy zmienia kolor wzdłuż prostej linii, radialny rozchodzi się od punktu centralnego, a stożkowy okrąża punkt centralny jak koło kolorów albo wykres kołowy.
W którą stronę wskazuje kąt?
0deg biegnie z dołu do góry, 90deg z lewej do prawej, 180deg z góry do dołu, a 270deg z prawej do lewej. W gradientach stożkowych kąt ustala, gdzie zaczyna się obrót.
Jak uzyskać ostrą linię między dwoma kolorami?
Nadaj dwóm sąsiednim punktom tę samą pozycję, na przykład czerwony 50% i niebieski 50%. Kolor wtedy przełącza się w tym miejscu zamiast się przenikać.
Czy gradienty CSS działają w każdej przeglądarce?
Gradienty liniowe i radialne działają w każdej aktualnej przeglądarce. Stożkowe wymagają Chrome 69, Firefox 83 albo Safari 12.1 lub nowszych. CSS wygenerowany tutaj zaczyna się od linii z jednolitym kolorem jako rozwiązania awaryjnego.
Czy mogę animować gradient CSS?
Możesz animować background-position albo background-size na powiększonym gradiencie, żeby uzyskać efekt ruchu. Animowanie samych kolorów punktów wymaga reguły CSS @property albo małego skryptu, bo przeglądarki same nie potrafią przejść płynnie między dwiema pełnymi wartościami gradientu.
Czy gradient można użyć jako kolor tekstu?
Tak. Skopiuj gradient CSS stąd do background, a potem dodaj do elementu tekstowego background-clip: text i color: transparent, żeby gradient prześwitywał przez litery zamiast wypełniać pole.