Ekosystem Volade — Narzędzie webowe

Darmowy generator gradientów CSS online

Twórz gradienty CSS liniowe, radialne i stożkowe w kilka sekund: wybierz typ, ustaw kąt i punkty kolorów, podglądaj wynik na żywo, a następnie skopiuj gotowy do wklejenia kod. Bez konta, bez wysyłania danych: wszystko dzieje się w Twojej przeglądarce.

Zaktualizowano 12 października 2026

Utwórz mój gradient Zaloguj się
Brak wysłanych danych Prywatność z założenia Za darmo na start
Narzędzie

Skomponuj gradient, skopiuj CSS

Typ gradientu, kąt, kolory i pozycje: wszystko aktualizuje się na żywo w podglądzie. Kod CSS jest gotowy na dole.

Generator gradientów CSS

Online Design & Kreatywność
Zaloguj się
Generowanie lokalne — Volade nic nie otrzymuje Gotowe
Kod CSS
0Punkty
0°Kąt
0Znaki
Szybkie przykłady:
0,0 0Komentarz Wszystkie narzędzia
Za darmo czy Premium?

Generator gradientów CSS jest darmowy i nieograniczony: twórz dowolną liczbę projektów bez konta. Gradient powstaje w Twojej przeglądarce — żaden serwer nie jest używany.

3 typy: liniowy, radialny, stożkowyZa darmo
Regulowany kąt, pozycja początku i punkty kolorówZa darmo
Podgląd na żywo i kod CSS kopiowany jednym kliknięciemZa darmo
Kompletny ekosystem premium (CMS, desktop, skrypty, API)Premium
Odkryj Premium
Funkcje

Kompletny generator gradientów CSS

Liniowy, radialny i stożkowy: trzy rodziny CSS

Przełączaj się między rodzajami jednym kliknięciem: ten sam zestaw punktów automatycznie przekształca się w linear-gradient(), radial-gradient() lub conic-gradient(). Kąt i pozycja początku pojawiają się lub ukrywają w zależności od wybranego typu.

Wybierz mój typ

Precyzyjny kąt i w pełni swobodne punkty kolorów

Ustaw kąt od 0 do 360°, przesuwaj każdy punkt koloru w całym zakresie 0–100% i dodawaj dowolną liczbę punktów. Wartość szesnastkowa każdego punktu jest również edytowalna z klawiatury, aby wkleić kolor z Twojej palety.

Precyzyjne strojenie kolorów

Podgląd na żywo i gotowy do wklejenia kod CSS

Każda zmiana natychmiast pojawia się w dużym podglądzie. Pełny kod — background: linear-gradient(…); — jest generowany na dole narzędzia. Kliknięcie »Kopiuj« umieszcza go w schowku, gotowy do użycia w Twoim CSS, JSX lub stylu inline.

Skopiuj mój CSS

Prywatnie: Twój gradient pozostaje na Twoim urządzeniu

Generowanie odbywa się całkowicie w Twojej przeglądarce: nic nie jest wysyłane ani przechowywane na serwerze. Twój ostatni projekt jest zapisywany lokalnie na urządzeniu, abyś mógł kontynuować od miejsca, w którym skończyłeś — idealne do iterowania nad identyfikacją wizualną.

Polityka prywatności
Jak to działa

Utwórz gradient CSS w trzech krokach

Wybierz typ

Liniowy dla tła kierunkowego, radialny dla poświaty, stożkowy dla pierścienia. Aktywny przycisk natychmiast przekształca kod i wyświetla ustawienia odpowiednie dla wybranej rodziny.

Ustaw kąt i kolory

Przesuń suwak Kąta, ustaw początek (X/Y) dla gradientów radialnych i stożkowych, a następnie dostosuj każdy punkt: selektor koloru, wartość szesnastkowa i pozycja procentowa. Dodawaj punkty dla bogatszych przejść.

Skopiuj kod CSS

Pełny wiersz pojawia się na dole narzędzia. Kliknij »Kopiuj«, a następnie wklej go do swojego arkusza stylów, komponentu lub edytora — gradient będzie wyglądał identycznie wszędzie tam, gdzie CSS jest obsługiwany.

FAQ

Najczęstsze pytania o gradienty CSS

Czym jest gradient CSS?
Gradient CSS to stopniowe przejście między dwoma lub więcej kolorami, rysowane bezpośrednio przez przeglądarkę dzięki funkcjom linear-gradient(), radial-gradient() lub conic-gradient(). W przeciwieństwie do obrazu gradient jest wektorowy: pozostaje ostry przy każdej rozdzielczości, waży kilkadziesiąt bajtów i jest w pełni konfigurowalny w CSS.
Jaka jest różnica między gradientem liniowym, radialnym i stożkowym?
Gradient liniowy przebiega wzdłuż prostej (kąt w stopniach): idealny dla tła nagłówka lub przycisku. Gradient radialny zaczyna się od punktu centralnego i rozchodzi się w kształcie koła lub elipsy: doskonały dla poświaty lub tła hero. Gradient stożkowy obraca się wokół punktu, jak wskazówki zegara: doskonały dla pierścienia, wykresu kołowego lub efektu »obramowania«.
Jak kontrolować kąt gradientu liniowego?
Kąt jest wyrażony w stopniach (deg) bezpośrednio po linear-gradient(: 0deg wskazuje w górę, 90deg w prawo, 180deg w dół. Narzędzie automatycznie generuje wartość na podstawie pozycji suwaka Kąta — musisz tylko skopiować kod.
Czym są punkty kolorów (color stops)?
Punkt koloru przypisuje kolor do pozycji wzdłuż gradientu (w %). Dwa punkty wystarczą dla prostego gradientu; dodanie kolejnych tworzy pasma, gładsze przejścia lub efekty wielobarwne. Każdy punkt można przesuwać suwakiem Pozycji i dodawać lub usuwać jednym kliknięciem.
Jak użyć wygenerowanego gradientu w moim CSS?
Skopiuj wygenerowany wiersz z pola wyjściowego, a następnie wklej go do arkusza stylów lub stylu inline: background: linear-gradient(...);. Możesz go również użyć jako color-image mask, jako obraz zastępczy lub jako wartość background-image nałożoną na kolor zapasowy.
Czy gradienty CSS działają we wszystkich przeglądarkach?
Tak: linear-gradient i radial_gradient są obsługiwane przez wszystkie nowoczesne przeglądarki od wielu lat, także na urządzeniach mobilnych. conic-gradient jest również obsługiwany w nowszych wersjach Chrome, Firefoksa, Safari i Edge. Dla starszych przeglądarek po prostu przygotuj jednolity kolor jako wartość zapasową.
Czy mogę nałożyć gradient na obraz?
Tak: we właściwości background (skrót) umieść gradient przed obrazem — background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0)), url(photo.webp);. Gradient pojawi się nad obrazem; wartości rgba() kontrolują krycie nakładki.
Czy narzędzie jest prywatne i darmowe?
Tak: generowanie odbywa się całkowicie w Twojej przeglądarce, nic nie jest wysyłane na serwer ani przechowywane poza Twoim urządzeniem (z wyjątkiem ostatniego projektu w localStorage, dla Twojej wygody). Narzędzie jest w pełni darmowe, nieograniczone i dostępne bez konta, na komputerze i urządzeniach mobilnych.
Kompletny przewodnik

Wszystko o gradientach CSS

Gradient CSS stał się najlżejszym i najbardziej elastycznym sposobem na ozdobienie tła, przycisku lub karty. Nie musisz już eksportować PNG z edytora graficznego: przeglądarka oblicza przejście między kolorami, wektorowo, w kilkudziesięciu bajtach. Generator gradientów CSS Volade Volade generuje dokładny kod — kąt, punkty, pozycję początku — podczas gdy komponujesz na ekranie.

linear-gradient: gradient kierunkowy

Funkcja linear-gradient() prjmuje kąt, a następnie punkty: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%). Kąt 0deg wskazuje w górę, 90deg w prawo, 180deg w dół. Bez kąta przeglądarka przechodzi od góry do dołu. To najczęściej używana składnia dla nagłówków, przycisków CTA i banerów sekcji.

radial-gradient: poświata i elipsa

Funkcja radial-gradient() zaczyna się od punktu (domyślnie środka) i rozchodzi się w kształcie koła lub elipsy. Pozycję początkową zapisuje się jako at X% Y%: radial-gradient(circle at 50% 50%, …). Doskonały dla efektu poświaty za tytułem, tła hero celującego w środek lub syntetycznego cienia. Narzędzie udostępnia dwa suwaki X i Y do precyzyjnego ustawienia początku.

conic-gradient: obrót wokół punktu

Funkcja conic-gradient() obraca się wokół punktu, jak wskazówki zegara. Zapisuje się jako conic-gradient(from 90deg at 50% 50%, …) i pozwala tworzyć pierścienie, okrągłe wskaźniki, kolorowe obramowania lub efekty pryzmatu. Każdy punkt zajmuje sektor kątowy: umieszczając kilka kolorów, rysujesz wykres kołowy CSS bez jednego obrazka.

Punkty kolorów (color stops)

Każdy punkt przypisuje kolor i pozycję procentową: #7a2fe2 0%, #a358ee 55%, #f3e8ff 100%. Identyczne pozycje dla dwóch kolorów tworzą ostre przejście (twardą krawędź); większe odstępy dają stopniowe rozmycie. Więcej niż dwa punkty umożliwiają palety wielobarwne, pasma lub symulacje materiałów (metal, perła, zorza polarna).

Nakładanie gradientu i przygotowanie wartości zapasowej

W skrócie background, kolejność ma znaczenie: plan pierwszy na początku. Ciemna nakładka na zdjęciu zapisuje się jako background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0)), url(photo.webp);. Zawsze umieszczaj jednolity kolor jako wartość zapasową (background-color) dla bardzo starych przeglądarek lub podczas ładowania obrazu.

Dobre praktyki wydajności

Gradient CSS jest przeliczany przy każdej zmianie rozmiaru: zachowaj rozsądną liczbę punktów (2 do 5 wystarcza w 90% przypadków) i unikaj wielokrotnego nakładania na bardzo dużych powierzchniach na urządzeniach mobilnych. Preferuj wartości szesnastkowe lub HSL i zamrażaj kąt, gdy tylko projekt zostanie zatwierdzony, aby uniknąć mikroróżnic między przeglądarkami.

Gradienty w stylu Volade

Aby zbudować spójną paletę przed tworzeniem gradientów, skorzystaj z generatora palet oraz selektora kolorów : znajdź kolory marki, a następnie wklej je tutaj jako punkty. Wynik kopiujesz bezpośrednio do CSS, systemu designu lub motywu — na komputerze i urządzeniach mobilnych, bez konta i bez wysyłania danych.

Jedna licencja, cały premium'owy ekosystem Przeglądarka · CMS · Desktop · Mobile · Skrypty · API · Narzędzia · Database
Jedna licencja, cały ekosystem Przejdź do premium Zaloguj się