Softonic

Generator gradientów CSS

Krok 1 / 3
Typ
Dalej

Nowoczesne tła interfejsów rzadko korzystają z jednolitej barwy, sekcje hero, przyciski i karty niemal zawsze używają gradientu CSS. Ten generator pozwala wybrać gradient liniowy lub radialny, dodać dowolną liczbę punktów koloru, ustawić kąt (dla liniowych) lub kształt (dla radialnych) oraz skopiować czystą wartość background: linear-gradient(…) gotową do wklejenia do arkusza stylów.

Jak stworzyć gradient w CSS

  1. 1

    Wybierz typ gradientu

    Liniowy (kierunek według kąta) lub radialny (koło/elipsa).

  2. 2

    Ustaw kąt lub kształt

    Liniowy: 0–360°. Radialny: koło lub elipsa.

  3. 3

    Dodaj punkty koloru

    Każdy punkt to kolor wraz z pozycją (0–100%). Gradienty z dwoma punktami są podstawą; trzy punkty lub więcej dają płynniejsze przejścia.

  4. 4

    Skopiuj kod CSS

    Wynik to pojedyncza wartość właściwości `background`, którą możesz wkleić do dowolnego pliku CSS.

Ściąga ze składni

/* Liniowy */
background: linear-gradient(135deg, #6366F1 0%, #EC4899 100%);

/* Radialny (koło) */
background: radial-gradient(circle at center, #6366F1 0%, #EC4899 100%);

/* Wielopunktowy */
background: linear-gradient(90deg, #fff 0%, #f59e0b 50%, #ef4444 100%);

Kąty, które faktycznie odpowiadają intuicji

Kąty gradientów CSS różnią się od kątów w trygonometrii: 0deg wskazuje w górę (na północ), 90deg w prawo (na wschód), 180deg w dół, a 270deg w lewo.

Kierunek Kąt
Z góry na dół 180deg
Z dołu do góry 0deg
Z lewej do prawej 90deg
Z lewego górnego do prawego dolnego 135deg

Unikanie mętnych tonów pośrednich

Gradienty liniowe między kolorami dopełniającymi (np. niebieski → pomarańczowy) przechodzą w okolicach 50% przez szary pas, w którym mieszanka wygląda „martwo“. Można to poprawić, gdy:

  • Dodasz pośredni punkt w pokrewnym odcieniu (niebieski → fioletowy → pomarańczowy).
  • Użyjesz interpolacji OKLCH (linear-gradient(in oklch, ...)) dla percepcyjnie płynniejszych przejść, obsługiwanej we wszystkich nowoczesnych przeglądarkach od 2024 roku.
  • Nieznacznie przesuniesz odcień jednego z końców, tak aby ton pośredni trafił do cieplejszej rodziny barw.

Wskazówka dotycząca wydajności

Gradienty są rysowane przez GPU i zazwyczaj są tanie. Animowanie gradientu (sztuczki z background-position, rozmycie SVG) i tak może zwiększyć koszt rysowania, przetestuj go na telefonie ze średniej półki przed wdrożeniem.

Najczęściej zadawane pytania

Gradienty CSS mierzą kąt zgodnie z ruchem wskazówek zegara od góry, podczas gdy standardowa matematyka mierzy go przeciwnie do ruchu wskazówek zegara od prawej strony. W CSS 90deg wskazuje w prawo; w trygonometrii byłoby to 0°.

Specyfikacja pozwala na dowolną liczbę. W praktyce więcej niż 4–5 punktów często zaczyna przypominać tęczę, podczas gdy dwa lub trzy dobrze dobrane punkty niemal zawsze wyglądają czyściej.

Tak, wklej to jako dowolną wartość: class="bg-[linear-gradient(135deg,#6366F1,#EC4899)]". Dla gradientów wielokrotnego użytku zdefiniuj własną klasę użytkową w konfiguracji Tailwind.

Zwykły edytor wysyła ustawienia gradientu do serwera, aby wyrenderować podgląd. W trybie prowadzonym typ, kąt, kształt i punkty koloru pojawiają się także w adresie URL strony. Nie wpisuj poufnych informacji; narzędzie nie zapisuje projektu gradientu do ponownego użycia.

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.

Walidator XSD

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

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.

Dekoder Protocol Buffers

Dekoduj lokalnie bajty Protobuf z zapisu hex, Base64, Base64URL, tekstu lub pliku, analizuj pola i eksportuj prywatny raport.

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