Zaprojektuj gradient CSS i skopiuj kod
Ten generator gradientów CSS wizualnie tworzy tła <code>linear-gradient()</code>, <code>radial-gradient()</code> i <code>conic-gradient()</code>. Kliknij pasek punktów, aby dodać kolory, przeciągnij je na miejsce, ustaw przezroczystość każdego punktu, a potem dostosuj kąt, kształt lub środek, obserwując podgląd na żywo. Skopiuj CSS z jednolitym kolorem zapasowym, gotową klasę Tailwind albo wyeksportuj gradient do PNG w dowolnym rozmiarze. Wklej gradient z arkusza stylów, aby edytować go tutaj. Wszystko działa lokalnie w Twojej przeglądarce.
Jak zrobić gradient CSS
- 1Wybierz Liniowy, Radialny lub Stożkowy albo zacznij od jednego z gotowych wzorów.
- 2Kliknij w dowolnym miejscu paska, aby dodać punkt koloru, przeciągaj punkty, aby je przesunąć, i naciśnij Delete na zaznaczonym punkcie, aby go usunąć. Strzałki przesuwają zaznaczony punkt o 1%, Shift+strzałka o 10%.
- 3Wybierz kolor i przezroczystość każdego punktu. Działa każdy kolor CSS: hex,
rgb(),hsl(),oklch()lub nazwa koloru. - 4Ustaw kąt pokrętłem (przytrzymaj Shift, aby przeskakiwać co 15°), a w gradientach radialnych i stożkowych przeciągaj po podglądzie, aby przesunąć środek.
- 5Skopiuj CSS lub klasę Tailwind albo ustaw szerokość i wysokość i pobierz PNG.
Gradienty liniowe, radialne i stożkowe
- linear-gradient()
- Kolory zmieniają się wzdłuż prostej linii pod danym kątem. <code>0deg</code> wskazuje w górę, <code>90deg</code> w prawo; słowa kluczowe <code>to right</code> i <code>to bottom left</code> oznaczają to samo słowami. Linia gradientu jest dokładnie tak długa, by narożniki dostały pierwszy i ostatni kolor.
- radial-gradient()
- Kolory rozchodzą się od środka jako okrąg lub elipsa. Słowo kluczowe rozmiaru decyduje, gdzie wypada 100%: <code>farthest-corner</code> (domyślne) sięga najdalszego narożnika elementu, <code>closest-side</code> kończy się na najbliższej krawędzi.
- conic-gradient()
- Kolory obiegają środek jak wskazówki zegara, zaczynając od kąta <code>from</code>. Ostre przejścia pozwalają tworzyć wykresy kołowe i koła barw bez żadnych obrazków.
Punkty koloru, ostre krawędzie i przezroczystość
Każdy punkt koloru to kolor i pozycja. Między dwoma punktami przeglądarka płynnie miesza kolory; gdy dwa punkty mają tę samą pozycję, kolor zmienia się nagle — tak rysuje się paski, flagi i wykresy kołowe. Nadaj ten sam kolor dwóm sąsiednim punktom, aby utrzymać go jako jednolity pas.
Punkty mogą być częściowo przezroczyste, więc gradient może wtopić obraz w stronę albo przyciemnić dół zdjęcia w nagłówku, żeby biały tekst był czytelny. Nowoczesne przeglądarki mieszają przezroczyste punkty w kolorze premultiplikowanym, więc przejście do transparent nie szarzeje już w środku, ale generator i tak zapisuje jawny kolor rgba() dla przejrzystości.
Gradienty powtarzające się
repeating-linear-gradient() oraz jego radialne i stożkowe odpowiedniki powielają wzór między pierwszym a ostatnim punktem na całym elemencie. Włącz Powtarzanie i przesuń ostatni punkt wyraźnie przed 100%, na przykład na 10%, aby uzyskać paski, pierścienie lub promienie. Jeśli ostatni punkt jest na 100%, gradient powtarzający się wygląda dokładnie jak zwykły.
Kolor zapasowy, Tailwind i eksport PNG
Gradienty są obrazami, więc przeglądarka, która nie umie ich narysować, nie pokaże nic pod Twoim tekstem. Opcjonalna linia zapasowa najpierw ustawia jednolite background — średnią z Twoich punktów — a linia z gradientem po niej nadpisuje je wszędzie tam, gdzie gradienty działają.
Wynik dla Tailwind to klasa z dowolną wartością, np. bg-[linear-gradient(90deg,#ff7e5f_0%,#feb47b_100%)]. Spacje zamieniają się w podkreślenia, bo nazwy klas Tailwind nie mogą zawierać spacji; działa to w Tailwind 3 i 4 bez żadnej konfiguracji.
Eksport PNG maluje ten sam gradient na canvas w wybranym rozmiarze, do 8192 pikseli na bok — na tapety, grafiki do mediów społecznościowych czy do programów graficznych, które nie czytają CSS. Dobierz kolory pasujące do tekstu w sprawdzaniu kontrastu, przeliczaj je między zapisami w konwerterze kolorów albo dodaj głębi w generatorze box-shadow.
Edycja istniejącego gradientu
Wklej gradient w polu Import: samo linear-gradient(…), całą deklarację background: lub background-image:, wersję z prefiksem -webkit- albo klasę Tailwind bg-[…]. Odczytywane są kierunki takie jak to top right, kąty w deg, turn lub rad, punkty z dwiema pozycjami i punkty bez pozycji. Pozycji w pikselach i podpowiedzi koloru nie da się pokazać na pasku procentowym, więc są przybliżane, o czym import Cię informuje.
Najczęstsze pytania
- Jak zrobić tło z gradientem w CSS?
- Ustaw background (lub background-image) na funkcję gradientu, np. background: linear-gradient(90deg, #ff7e5f, #feb47b);. Ten generator napisze tę linię za Ciebie, opcjonalnie z jednolitym kolorem zapasowym przed nią.
- Czym różnią się gradienty liniowe, radialne i stożkowe?
- Gradient liniowy zmienia kolor wzdłuż prostej linii, radialny rozchodzi się od środka okręgami lub elipsami, a stożkowy obiega środek jak wskazówka zegara.
- Jak zrobić ostrą krawędź lub paski?
- Ustaw dwa punkty o różnych kolorach w tej samej pozycji. Aby uzyskać powtarzające się paski, włącz Powtarzanie i umieść ostatni punkt na małej wartości, np. 10%.
- Czy gradient CSS może być przezroczysty?
- Tak. Zmniejsz krycie punktu, a generator zapisze go jako rgba(). Gradient od koloru do przezroczystości to popularny sposób na wtopienie obrazu lub nakładki w stronę.
- Jak użyć gradientu w Tailwind CSS?
- Skopiuj klasę Tailwind — dowolną wartość, np. bg-[linear-gradient(90deg,#ff7e5f_0%,#feb47b_100%)] — i dodaj ją do elementu. Wbudowane klasy from-/via-/to- obsługują tylko proste gradienty liniowe; dowolna wartość obsługuje każdy gradient.
- Czy gradienty stożkowe działają we wszystkich przeglądarkach?
- conic-gradient() działa we wszystkich aktualnych wersjach Chrome, Edge, Firefox i Safari. Dodaj kolor zapasowy, jeśli nadal wspierasz bardzo stare przeglądarki.
- Czy mogę pobrać gradient jako obraz?
- Tak. Wpisz szerokość i wysokość i pobierz PNG. Obraz jest rysowany w Twojej przeglądarce dokładnie w tym rozmiarze, do 8192 × 8192 pikseli.
- Czy coś jest przesyłane na serwer?
- Nie. Podgląd, CSS i eksport PNG powstają w całości w Twojej przeglądarce.