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

Konwerter ASCII na binarny

Konwertuj dowolny ciąg ASCII na reprezentację binarną. Każdy znak staje się ośmioma bitami, rozdzielonymi spacjami, gotowymi do wklejenia w ślad protokołu albo zadanie domowe.

Konwerter binarnego na ósemkowy

Konwertuj binarny na ósemkowy, grupując bity po trzy. Przydatne przy uprawnieniach Unix, starszych systemach i kompaktowym zapisie liczb.

Konwerter Base64 na Hex

Konwertuj ciąg Base64 na jego bazowe bajty zapisane szesnastkowo. Przydatne do inspekcji tokenów, kluczy, certyfikatów i JWT.

Konwerter binarny na hex

Konwertuj wejście binarne na zwykłą wartość szesnastkową wielkimi literami. Znaki inne niż 0 i 1 są ignorowane, a zera wiodące nie są zachowywane.

Konwerter binarnego na ASCII

Wklej zapis binarny (bajty rozdzielone spacjami albo długi strumień bitów) i otrzymaj tekst ASCII, który reprezentuje. Obsługuje kodowania 7-bitowe i 8-bitowe.

Binarny na dziesiętny

Natychmiast konwertuj liczby binarne na dziesiętne. Pokazuje rozwinięcie pozycyjne, aby było widać, jak każdy bit dokłada się do wyniku.