PL

Generator gradientu CSS

Generator gradientu CSS: wybierz rodzaj gradientu, jego kierunek i kolory. Każdy punkt koloru ustawisz próbnikiem i suwakiem, a kolejne dodasz przyciskiem „+ Punkt koloru”. Narzędzie zapisuje gradient w zwięzłym, poprawnym CSS i dodaje jednolity kolor tła (background-color) jako zapas, dzięki któremu tekst pozostaje czytelny także bez gradientu.

Zaprojektuj gradient

background-color: #675BF0;
background-image: linear-gradient(90deg, #3B82F6 0%, #9333EA 100%);
°
0° = do góry, 90° = w prawo, 180° = w dół (domyślnie)
Jeden punkt w wierszu: kolor i opcjonalna pozycja w %, np. #3B82F6 0%
Zostaw puste, aby użyć średniej z kolorów gradientu
Wpisane dane są zapisywane tylko w tej przeglądarce.

Wynik

Deklaracja CSS
background-color: #675BF0; background-image: linear-gradient(90deg, #3B82F6 0%, #9333EA 100%);
Sam gradient (do background-image)
linear-gradient(90deg, #3B82F6 0%, #9333EA 100%)
Kolor zapasowy (background-color)
#675BF0
Punkty koloru z obliczonymi pozycjami
NrKolorPodana pozycjaUżyta pozycja
1#3B82F60 %0 %
2#9333EA100 %100 %

Jak to obliczamy

Trzy rodzaje gradientów

FunkcjaPrzejście kolorówDomyślnie (bez podania)
linear-gradient()wzdłuż prostej pod wybranym kątem180deg = z góry na dół
radial-gradient()od środka na zewnątrzelipsa, wyśrodkowana, do najdalszego rogu
conic-gradient()wokół środka, jak wykres kołowyod 0deg (góra), zgodnie z ruchem wskazówek zegara

W gradiencie liniowym kąt wyznacza kierunek: 0deg wskazuje w górę, 90deg w prawo, 180deg w dół. Opcja „Powtarzaj” tworzy repeating-linear-gradient() i jego odpowiedniki: wzór między pierwszym a ostatnim punktem się powtarza – idealne na paski.

Punkty koloru i brakujące pozycje

Pozycje są opcjonalne. Gdy ich brak, obowiązuje specyfikacja W3C (CSS Images, „Coloring the Gradient Line”): pierwszy punkt leży na 0%, ostatni na 100%, a punkty bez pozycji pomiędzy nimi rozkładają się równomiernie. Jeśli pozycja jest mniejsza niż wcześniejsza, zostaje do niej podniesiona – tak powstają ostre krawędzie. Dwie pozycje z rzędu (red 0% 50%) dają jednolity pas. Tabela pokazuje pozycję, której przeglądarka faktycznie używa dla każdego punktu.

Po co kolor zapasowy?

Gradienty to obrazy. Jeśli obraz nie zostanie narysowany – na przykład w trybie wymuszonych kolorów albo przez literówkę w wartości – zostaje tylko background-color. Generator używa do tego średniej kolorów ważonej ich udziałem w powierzchni.

Przykład linear-gradient(90deg, #3B82F6 0%, #9333EA 100%): każdy kolor zajmuje połowę linii. Czerwony (59 + 147) ÷ 2 = 103, zielony (130 + 51) ÷ 2 = 90,5 ≈ 91, niebieski (246 + 234) ÷ 2 = 240 – kolor zapasowy #675BF0. Sprawdź kontrast tekstu z tym kolorem oraz z najjaśniejszym i najciemniejszym fragmentem gradientu.

Najczęściej zadawane pytania

Jak zrobić gradient w CSS?

Użyj background-image: linear-gradient(90deg, #3B82F6, #9333EA); – albo skróconej właściwości background. Przed nią dodaj background-color jako kolor zapasowy. Generator podaje obie linie gotowe do skopiowania.

Jak zrobić gradient pionowy w CSS?

Gradient liniowy bez podanego kierunku biegnie z góry na dół (180deg). Ustaw więc kierunek na 180° albo wpisz to bottom; 0° odwraca kierunek (z dołu do góry).

Jak uzyskać ostre krawędzie zamiast płynnych przejść?

Nadaj dwóm punktom tę samą pozycję, np. red 50%, blue 50%, albo podaj dla jednego koloru dwie pozycje: red 0% 50%, blue 50% 100%. Włącz „Powtarzaj”, aby uzyskać paski.

Czy conic-gradient działa we wszystkich przeglądarkach?

We wszystkich aktualnych – tak (Chrome i Edge od wersji 69, Firefox od 83, Safari od 12.1). W bardzo starych przeglądarkach kolor zapasowy sprawia, że obszar nie zostaje pusty.

Czy mogę użyć przezroczystych kolorów?

Tak. Wpisz punkt jako rgba() lub 8-cyfrowy HEX, np. rgba(0, 0, 0, 0.5). Podgląd pokazuje przezroczystość na szachownicy. Kolor zapasowy jest zawsze jednolity.

Źródła i podstawa prawna

Stan na:

Podobne narzędzia