Generator gradientów CSS

Ten generator gradientów CSS tworzy gradienty liniowe i radialne z punktów koloru, którymi sterujesz, z podglądem na żywo i gotową do wklejenia deklaracją tła. Przeciągaj punkty po pasku, ustaw kąt lub kształt, a CSS aktualizuje się natychmiast.

Wszystko działa w Twojej przeglądarce na podstawie wybranych kolorów i ustawień, więc nic nie jest wysyłane, a wynik możesz skopiować i używać offline.

Gradient liniowy miesza kolory wzdłuż prostej linii, a kąt ustala jej kierunek: 0 stopni w górę, 90 stopni w prawo, 180 stopni w dół. Gradient radialny miesza kolory na zewnątrz od środka, jako okrąg lub elipsa.

Oba to standardowe wartości CSS, zapisywane jako linear-gradient() i radial-gradient(), i oba używają tej samej listy punktów koloru, więc zmiana typu zachowuje kolory i zmienia tylko sposób ich rozłożenia.

Każdy punkt koloru to kolor umieszczony w pozycji od 0% do 100%. Gradient płynnie miesza kolory między sąsiednimi punktami, więc pozycja punktu decyduje, gdzie jego kolor osiąga szczyt i jak szybko przechodzi w następny.

Dodaj tyle punktów, ile potrzebujesz, aby zbudować wielokolorowe gradienty, przeciągaj je, aby dostroić przejście, albo kliknij pasek, aby dodać nowy punkt tam, gdzie chcesz. Dwa punkty to minimum, jakiego potrzebuje gradient.

Skopiuj wygenerowany kod i wklej go jako tło dowolnego elementu, na przykład sekcji, karty lub przycisku. Nowoczesne przeglądarki obsługują linear-gradient i radial-gradient bez prefiksu producenta, więc wartość działa od razu.

Ponieważ gradient jest po prostu wartością, możesz go też użyć wszędzie tam, gdzie oczekiwany jest obraz tła, nałożyć go na jednolity kolor jako zapas albo użyć tych samych punktów w wersji liniowej i radialnej dla spójnego wyglądu.