Softonic

Generator gradientów CSS

Krok 1 / 2
Dalej

Gradient może nadać przyciskom, kartom, sekcjom hero i plakietkom dopracowany wygląd bez żadnego pliku graficznego. Ten generator pisze CSS za Ciebie: wybierz gradient liniowy lub radialny, wybierz dwa kolory, w razie potrzeby ustaw kąt i skopiuj gotową deklarację background prosto do swojego arkusza stylów.

Jak zbudować gradient

  1. 1

    Wybierz typ gradientu

    Liniowy dla prostej zmiany wzdłuż kąta albo radialny, aby rozchodzić kolory na zewnątrz od punktu centralnego.

  2. 2

    Wybierz dwa kolory

    Wpisz dowolne kolory szesnastkowe (na przykład #2563eb i #16a34a) w dwóch polach koloru.

  3. 3

    Ustaw kąt (tylko liniowy)

    Kąt w stopniach: 0deg wskazuje w górę, 90deg w prawo, 180deg w dół. Gradienty radialne ignorują kąt.

  4. 4

    Wygeneruj CSS

    Narzędzie buduje deklarację `background:` z Twoimi wartościami.

  5. 5

    Skopiuj kod

    Skopiuj pojedynczą linię deklaracji i wklej ją do swojego arkusza stylów, wewnątrz reguły elementu, który chcesz stylizować.

Gradienty liniowe

background: linear-gradient(135deg, #2563eb, #16a34a);

Kąt biegnie zgodnie z ruchem wskazówek zegara od góry: 0deg = góra, 90deg = prawo, 180deg = dół, 270deg = lewo. Możesz też pisać nazwane kierunki ręcznie: to right odpowiada 90deg, a to bottom left odpowiada 135deg.

Gradienty radialne

background: radial-gradient(circle, #2563eb, #16a34a);

Kolory rozchodzą się od środka elementu na zewnątrz. Gradienty radialne nie używają kąta; dodaj słowa kluczowe pozycji lub rozmiaru ręcznie (at 30% 40%, ellipse), gdy potrzebujesz większej kontroli.

Punkty koloru

Gradienty CSS przyjmują więcej niż dwa kolory, a każdy punkt może mieć pozycję:

background: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);

Dwa punkty na tej samej pozycji tworzą twardą granicę: kolor zmienia się natychmiast zamiast płynnie przechodzić. Przydatne przy dzielonych tłach.

Wskazówki

  • Gradient od czerwieni do błękitu przechodzi przez szarawy środek przy domyślnej interpolacji sRGB. Interpolacja w oklch utrzymuje barwną mieszankę: linear-gradient(in oklch, red, blue), obsługiwana przez nowoczesne przeglądarki.
  • transparent nie jest bezbarwny: w sRGB to rgba(0,0,0,0), więc przejście do transparent przechodzi przez ciemną szarość. Zamiast tego użyj rgba(color, 0).
  • Gradienty są renderowane na GPU w nowoczesnych przeglądarkach, więc praktycznie nic nie kosztują w każdym rozmiarze. Animowanie między gradientami nie jest obsługiwane i zmienia się gwałtownie; zamiast tego animuj krycie dodatkowej warstwy.
  • Wypełnienie tekstu: połącz deklarację z background-clip: text; color: transparent;, aby wypełnić tekst gradientem. Dla ramek border-image: linear-gradient(...) 1; działa w nowoczesnych przeglądarkach.

Najczęściej zadawane pytania

Liniowy dla kierunkowych przejść, takich jak przycisk albo sekcja hero płynąca od góry do dołu lub od rogu do rogu. Radialny dla efektów reflektora i poświaty, gdzie kolory rozchodzą się od punktu centralnego na zewnątrz.

Kąt ustawia kierunek przejścia dla gradientów liniowych: 0deg wskazuje w górę, 90deg w prawo i tak dalej zgodnie z ruchem wskazówek zegara. Gradienty radialne ignorują kąt.

Domyślna interpolacja sRGB uśrednia składowe koloru, co daje nienasycony środek. Zamiast tego interpoluj w oklch (linear-gradient(in oklch, red, blue)), aby mieszanka pozostała barwna w środku.

CSS nie może interpolować między dwiema wartościami background-image, zmiana jest gwałtowna. Typowe obejścia: animowanie krycia nakładanego gradientu albo przesuwanie background-position na większym, nieruchomym gradiencie.

Powiązane narzędzia

Generator konfiguracji webpack

Utwórz plik webpack.config.js dla webpacka 5 do czystego JavaScriptu, Reacta lub Vue: TypeScript, Babel, CSS lub Sass, obrazy, HtmlWebpackPlugin, serwer deweloperski i polecenie npm install.

Generator kolorów analogicznych

Twórz pięciokolorowe palety analogiczne z dowolnego koloru bazowego: klasyczną trójkę, dwie zewnętrzne barwy oraz wartości hex, RGB i HSL.

Generator fikcyjnych numerów telefonu

Generuj do 50 fikcyjnych numerów z oficjalnie zastrzeżonych zakresów w pięciu krajach.

Kod na obraz

Wklej kod, ustaw motyw, kolory, rozmiar czcionki, odstępy, nagłówek i numery wierszy, sprawdź podgląd canvas i pobierz PNG. Renderowanie zwykłego tekstu, bez podświetlania składni.

Walidator XSD

Waliduj dokument XML wobec schematu XSD i zgłaszaj niezgodności elementów i typów z dokładnymi numerami wierszy.

Konwerter liczb szesnastkowych na dziesiętne

Przeliczaj liczby szesnastkowe na dziesiętne (system o podstawie 10). Działa z adresami pamięci, kodami błędów, kanałami RGB oraz liczbami całkowitymi o dowolnej precyzji.

Narzędzie jest dostępne w innych językach