Generator gradientów CSS
Wybierz dwa kolory, zdecyduj się na gradient liniowy lub radialny i dostosuj kąt, aby zobaczyć podgląd na żywo. Odpowiedni kod CSS jest generowany natychmiast i gotowy do skopiowania prosto do arkusza stylów.
background: linear-gradient(90deg, #ff9a00, #60acfc);Jak to działa
Wybierz dwa kolory za pomocą selektorów, zdecyduj się na „liniowy” lub „radialny”, a przy gradientach liniowych przeciągnij suwak kąta. Podgląd i kod CSS poniżej aktualizują się natychmiast po każdej zmianie.
Wskazówka
Kąt 90 stopni biegnie od lewej do prawej, 180 stopni z góry na dół, a 0 stopni z dołu do góry — poeksperymentuj z suwakiem, aby zobaczyć, jak zmienia się kierunek gradientu.
Jaka jest różnica między liniowym a radialnym?
Gradient liniowy przechodzi wzdłuż prostej linii pod ustawionym kątem. Gradient radialny rozchodzi się okręgiem od środka na zewnątrz, niezależnie od kąta.
Więcej narzędzi w tej kategorii
Kalkulator ekspozycji
Znajdź równoważne ustawienia ekspozycji dla przysłony, czasu naświetlania i ISO.
Kalkulator proporcji obrazu
Skaluj obraz lub wideo proporcjonalnie i znajdź uproszczone proporcje.
Sprawdzanie kontrastu
Sprawdź, czy kolor tekstu i tła spełniają wytyczne kontrastu WCAG.
Generator palety kolorów
Zamień dowolny kolor bazowy w palety komplementarne, analogiczne i triadyczne.
Konwerter formatów kolorów
Błyskawicznie konwertuj dowolny kolor między HEX, RGB, HSL i CMYK, z kopiowaniem jednym kliknięciem dla każdego formatu.
Generator skali typograficznej
Wygeneruj harmonijny zestaw rozmiarów czcionek na podstawie rozmiaru bazowego i współczynnika skali, gotowy do skopiowania jako blok właściwości niestandardowych CSS.