Generator gradientów CSS
Zaprojektuj gradient liniowy, radialny lub stożkowy, obserwuj zmiany na żywo i skopiuj regułę CSS background.
Działa w całości w Twojej przeglądarce
Punkty koloru
Gotowe wzory
Kolorami punktów może być dowolny kolor zrozumiały dla przeglądarki (HEX, nazwy, rgb(), hsl(), oklch()). Do 10 punktów. Pozycje są podawane w procentach; wynik to zwykły CSS bez prefiksów producentów.
Jak stworzyć gradient CSS
- Wybierz Liniowy, Radialny lub Stożkowy albo zacznij od gotowego wzoru.
- Ustaw kąt lub położenie, a potem edytuj punkty koloru: zmieniaj kolor i pozycję każdego, dodawaj punkty i przesuwaj je w górę lub w dół.
- Naciśnij Kopiuj CSS i wklej regułę do arkusza stylów. Zaznacz opcję koloru zastępczego, jeśli chcesz mieć przed nią wiersz z jednolitym kolorem.
Jak czytać gradient CSS
Gradient CSS to obraz, który przeglądarka rysuje sama, więc skaluje się do dowolnego rozmiaru i nie wymaga pobierania. Gradient liniowy miesza kolory wzdłuż linii wyznaczonej kątem. Gradient radialny miesza je od punktu środkowego na zewnątrz, w kole lub elipsie. Gradient stożkowy omiata kolory wokół środka jak wskazówka zegara, co czyni go naturalnym wyborem dla wykresów kołowych i kół barw.
Każdy punkt koloru to kolor plus pozycja wzdłuż linii gradientu, zapisana w procentach. Między dwoma punktami przeglądarka miesza płynnie. Jeśli dwa punkty mają tę samą pozycję, przejście nie ma szerokości i powstaje ostra krawędź. Jeśli punkt jest umieszczony wcześniej niż poprzedni, przeglądarki traktują go tak, jakby leżał na pozycji wcześniejszego punktu, dlatego to narzędzie pozwala zmieniać kolejność i sortować punkty.
Reguła jest zapisywana jako background:, więc działa na każdym elemencie. Gradienty są rysowane na tle, dlatego tekst na nich wymaga takiej samej troski o kontrast jak tekst na jednolitym kolorze: sprawdź osobno najjaśniejsze i najciemniejsze części przejścia.
Wskazówki
- Wybierz pasujące do siebie kolory punktów w narzędziu Generator palety kolorów.
- Przelicz punkt między HEX, RGB i HSL w narzędziu Konwerter kolorów i kontrastu.
- Wdrażasz arkusz stylów? Zmniejsz go narzędziem Minifikuj i upiększaj CSS.
Najczęstsze pytania
Co oznacza kąt w gradiencie liniowym?
0deg wskazuje górę, więc gradient biegnie od dolnej krawędzi w górę. 90deg biegnie od lewej do prawej, 180deg od góry do dołu, a 270deg od prawej do lewej. 360deg to ten sam kierunek co 0deg. Narzędzie zapisuje wpisaną liczbę z jednostką deg.
Jak uzyskać ostrą krawędź zamiast płynnego przejścia?
Nadaj dwóm sąsiednim punktom tę samą pozycję. Na przykład czerwony przy 50%, a po nim niebieski przy 50% zmienia kolor w połowie bez przejścia. Pokazuje to wzór Ostre pasy.
Co robi opcja powtarzania?
Zapisuje repeating-linear-gradient, repeating-radial-gradient lub repeating-conic-gradient. Wzór między pierwszym a ostatnim punktem jest powielany, więc widać go tylko wtedy, gdy ostatni punkt jest przed 100%. Spróbuj punktów przy 0%, 10% i 20%, aby uzyskać pasy.
Do czego służy wiersz z jednolitym kolorem zastępczym?
Przeglądarka, która nie potrafi odczytać gradientu, ignoruje ten wiersz i zachowuje wcześniejszy. Przeglądarki obsługujące gradienty, czyli prawie wszystkie w użyciu, go nadpisują. Kolorem zastępczym jest kolor pierwszego punktu.
Jakie formaty kolorów są akceptowane?
Wszystko, co przyjmuje właściwość CSS color w twojej przeglądarce: #1636a3, tomato, rgb(22 54 163), hsl(226 76% 36%) lub oklch(0.5 0.2 260). Wpisanie czegoś innego pokazuje komunikat i zostawia na ekranie ostatni poprawny gradient.
Czy gradient stożkowy potrzebuje położenia?
Zawsze ma środek, a to narzędzie zapisuje go w procentach, więc 50% 50% to środek pola. Kąt początkowy obraca miejsce, od którego zaczyna się przejście kolorów, mierzone zgodnie z ruchem wskazówek zegara od góry.