UTILS.
Domyślnie prywatne
▤

Generator gradientów CSS

Zbuduj gradient liniowy lub radialny z podglądem na żywo i skopiuj CSS.

Twoje pliki zostają na tym urządzeniu

Pliki są przetwarzane w przeglądarce, nigdy nie są wysyłane. Strona pobiera kod i zasoby potrzebne narzędziom. Bez kont i śledzenia.

Użyj przycisku Pobierz, aby zapisać narzędzie jako jeden plik HTML do pracy offline.

Prywatność →

Wypróbuj przykład z rozwiązaniem

Przykład

Wybierz typ liniowy, ustaw kąt na 135, a kolory na #ff7e5f i #feb47b. CSS to background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);. Przesunięcie pierwszego punktu na 20 sprawia, że pierwszy kolor jest jednolity na pierwszych 20% obszaru.

Pamiętaj

0deg wskazuje w górę, a 90deg w prawo, więc 135deg biegnie od lewego górnego do prawego dolnego rogu. Jeśli tekst leży na gradiencie, sprawdź jego kontrast z oboma skrajnymi kolorami.

O tym narzędziu

Twórz dwukolorowy gradient liniowy lub radialny, wybierając kolory, pozycje i kąt, a następnie skopiuj regułę tła. Podgląd na żywo działa w całości w Twojej przeglądarce.

Najczęściej zadawane pytania

Czym jest kąt w gradiencie liniowym?
Kąt określa kierunek przejścia kolorów: 0° wskazuje w górę, 90° w prawo, 180° w dół i tak dalej.
Kiedy używać gradientu radialnego zamiast liniowego?
Użyj radialnego, aby kolory rozchodziły się na zewnątrz od punktu centralnego (jak reflektor); liniowy miesza je wzdłuż linii prostej.

Więcej narzędzi