Zaprojektuj gradient. Skopiuj gotowy CSS.
Design a gradient. Copy the finished CSS.
Ustaw kolory, kąt i typ przejścia, a podgląd i kod background zaktualizują się
natychmiast. Bez instalacji, bez rejestracji — działa w całości w Twojej przeglądarce.
Set the colors, angle, and gradient type, and both the preview and the
background code update instantly. No install, no sign-up — it all runs in your browser.
background: linear-gradient(135deg, #ec4a0a 0%, #ffc45c 100%);
Wybierz typ
Pick a type
Zdecyduj, czy potrzebujesz przejścia liniowego, promienistego, czy stożkowego.
Decide whether you need a linear, radial, or conic transition.
Dodaj kolory
Add colors
Ustaw do pięciu przystanków koloru i przeciągnij ich pozycję na osi 0–100%.
Set up to five color stops and drag their position along the 0–100% axis.
Skopiuj CSS
Copy the CSS
Kliknij „Kopiuj” i wklej gotową wartość background do swojego pliku.
Click "Copy" and paste the ready background value into your file.
- Tła sekcji hero i kart produktowych.
- Przyciski i CTA, które mają wyglądać na "premium".
- Nakładki na zdjęcia poprawiające czytelność tekstu.
- Hero section and product-card backgrounds.
- Buttons and CTAs that need a "premium" feel.
- Overlays on photos that improve text readability.
Czym jest ten generator? To wizualne narzędzie do tworzenia wartości CSS
background, które inaczej trzeba by pisać ręcznie, zgadując kąty i procenty.
What is this tool? A visual way to build a CSS background value
that would otherwise mean writing angles and percentages by hand.
Czym jest gradient CSS?
What is a CSS gradient?
Gradient CSS to płynne przejście między dwoma lub więcej kolorami, generowane bezpośrednio przez przeglądarkę jako tło elementu, bez konieczności użycia obrazka.
A CSS gradient is a smooth transition between two or more colors, rendered directly by the browser as an element's background, with no image file needed.
Jaka jest różnica między linear, radial i conic?
What's the difference between linear, radial, and conic?
Linear rozciąga kolory wzdłuż linii pod zadanym kątem, radial rozchodzi je od punktu środkowego na zewnątrz, a conic obraca kolory dookoła punktu, tworząc efekt tarczy.
Linear stretches colors along a line at a given angle, radial spreads them outward from a center point, and conic rotates colors around a point, like a color wheel.
Czy mogę użyć więcej niż dwóch kolorów?
Can I use more than two colors?
Tak. Ten generator pozwala dodać do pięciu przystanków koloru, a każdy z nich można ustawić w dowolnym miejscu na osi od 0% do 100%.
Yes. This generator lets you add up to five color stops, and each one can be placed anywhere along the 0% to 100% axis.
Czy wygenerowany CSS działa we wszystkich przeglądarkach?
Does the generated CSS work in every browser?
Tak, składnia linear-gradient, radial-gradient i
conic-gradient jest obsługiwana przez wszystkie aktualne przeglądarki bez prefiksów.
Yes, linear-gradient, radial-gradient, and
conic-gradient syntax is supported by all current browsers without prefixes.
Czy narzędzie wysyła moje dane gdziekolwiek?
Does the tool upload my data anywhere?
Nie. Cała generacja odbywa się lokalnie w Twojej przeglądarce — nic nie jest zapisywane ani wysyłane na serwer.
No. Everything runs locally in your browser — nothing is saved or sent to a server.
Czym jest CSS Gradient Generator?
Gradienty CSS pozwalają uzyskać płynne przejście barw bez ładowania dodatkowego obrazka, co oznacza mniejszy ciężar strony i ostrzejszy wygląd na każdej rozdzielczości ekranu. Ręczne pisanie takiej wartości bywa jednak żmudne — trzeba wyobrazić sobie kąt, wyliczyć procenty przystanków i sprawdzić efekt dopiero po odświeżeniu strony. Ten generator eliminuje ten krok: zmieniasz suwak, a podgląd i kod aktualizują się od razu.
Jak działają wartości gradientu
linear-gradient przyjmuje kąt (w stopniach) oraz listę kolorów z opcjonalną
pozycją procentową. Bez podanej pozycji przeglądarka rozkłada kolory równomiernie.
radial-gradient zamiast kąta korzysta z punktu środkowego, od którego kolory
rozchodzą się w kształcie koła lub elipsy. conic-gradient obraca kolory wokół
punktu środkowego niczym wskazówki zegara, co dobrze sprawdza się przy tworzeniu wykresów
kołowych czy efektów tęczy.
Kiedy wybrać który typ
- Linear — tła sekcji, karty, przyciski, płynne przejścia w interfejsie.
- Radial — akcenty świetlne, winiety, efekt "spotlight" za elementem.
- Conic — wskaźniki postępu, koła kolorów, nietypowe tła dekoracyjne.
Praktyczne wskazówki
Gradienty złożone z kolorów o zbliżonym odcieniu wyglądają bardziej stonowanie i lepiej nadają się do teł treściowych. Mocne kontrasty kolorystyczne warto rezerwować dla elementów, które mają przyciągać wzrok, takich jak przyciski CTA. Jeśli gradient ma znaleźć się pod tekstem, dodaj dodatkowo półprzezroczystą nakładkę w ciemnym odcieniu, aby zachować kontrast i czytelność.
Wdrożenie w projekcie
Skopiowaną wartość możesz wkleić bezpośrednio jako background elementu albo
zapisać jako zmienną CSS, np. --gradient-brand, żeby używać jej konsekwentnie
w wielu miejscach projektu. Warto też sprawdzić wygląd gradientu w trybie ciemnym — kolory,
które dobrze wyglądają na jasnym tle, mogą wymagać korekty jasności w dark mode.
What is a CSS Gradient Generator?
CSS gradients give you a smooth color transition without loading an extra image, which means a lighter page and a crisper look at every screen resolution. Writing that value by hand is tedious, though — you have to picture the angle, calculate stop percentages, and only see the result after refreshing the page. This generator removes that step: move a slider and both the preview and the code update immediately.
How gradient values work
linear-gradient takes an angle (in degrees) plus a list of colors with an
optional percentage position. Without a position, the browser spaces the colors evenly.
radial-gradient uses a center point instead of an angle, with colors spreading
outward in a circle or ellipse. conic-gradient rotates colors around a center
point like clock hands, which works well for pie charts or rainbow-style effects.
When to pick which type
- Linear — section backgrounds, cards, buttons, smooth UI transitions.
- Radial — light accents, vignettes, a spotlight effect behind an element.
- Conic — progress indicators, color wheels, unusual decorative backgrounds.
Practical tips
Gradients built from colors with similar hues look calmer and suit content backgrounds better. Reserve strong color contrasts for elements meant to grab attention, like CTA buttons. If a gradient sits behind text, add a semi-transparent dark overlay on top to keep contrast and readability intact.
Using it in production
Paste the copied value directly as an element's background, or save it as a
CSS variable such as --gradient-brand to reuse it consistently across the
project. It's also worth checking how the gradient looks in dark mode — colors that read
well on a light background may need a brightness tweak there.
Sprawdź też inne generatory CSS.
Check out the other CSS generators too.
Cienie, zaokrąglenia, przyciski i efekty szkła — wszystko w jednym miejscu, bez instalacji.
Shadows, border radius, buttons, and glass effects — all in one place, no install needed.