Twórz liniowe, promieniste i stożkowe gradienty CSS z wieloma punktami kolorów i kopiuj kod.

Podgląd
Wynik CSS
background: ;

Wszystko działa w Twojej przeglądarce — bez przesyłania, bez rejestracji.

Typ gradientu
deg
Punkty kolorów Kliknij pasek, aby dodać punkt, przeciągnij, aby przesunąć
Wybrany punkt
Kolor punktu
100%
%
Gotowe ustawienia

O Generator gradientów CSS

CSS Gradient Generator tworzy gradienty liniowe, radialne i stożkowe z pełną kontrolą wizualną. Dodawaj przystanki kolorów, klikając pasek gradientu, przeciągaj je, aby je przesunąć, i nadaj każdemu przystankowi własny kolor, przezroczystość i pozycję. Gradienty liniowe otrzymują kontrolę kąta; radialne — kształt (koło lub elipsa) i pozycję; stożkowe — kąt początkowy.

Podgląd na żywo pokazuje dokładnie to, co wyrenderuje przeglądarka, a przycisk losowania oraz zestaw wyselekcjonowanych presetów są pod ręką, gdy potrzebujesz punktu wyjścia zamiast pustego płótna. Przystanki można dowolnie dodawać i usuwać — gradient potrzebuje jedynie co najmniej dwóch.

Gdy efekt wygląda dobrze, skopiuj samą wartość gradientu lub pełną regułę CSS. Generator działa w całości w Twojej przeglądarce, bez przesyłania i bez rejestracji, co czyni go szybkim towarzyszem dla przycisków, teł hero, obramowań i efektów tekstowych.

Jak korzystać z Generator gradientów CSS

  1. Wybierz typ gradientu: liniowy, radialny lub stożkowy.
  2. Ustaw kąt (liniowy), kształt i pozycję (radialny) lub kąt początkowy (stożkowy).
  3. Kliknij pasek gradientu, aby dodać przystanki kolorów, i przeciągnij je w odpowiednie miejsce.
  4. Nadaj każdemu przystankowi kolor, przezroczystość i dokładną pozycję.
  5. Wypróbuj presety lub przycisk losowania dla szybkiej inspiracji.
  6. Skopiuj wartość gradientu lub pełną regułę CSS.

Najczęściej zadawane pytania

Gradienty liniowe mieszają kolory wzdłuż prostej linii pod danym kątem. Gradienty radialne rozchodzą się na zewnątrz od punktu centralnego jako koło lub elipsa. Gradienty stożkowe rozprowadzają kolory wokół punktu centralnego — to typ stojący za wykresami kołowymi i kołami kolorów.

Co najmniej dwa, bez praktycznego górnego limitu. Dwa lub trzy przystanki tworzą czyste tła; ciasno rozmieszczone przystanki tworzą twarde pasy kolorów, w ten sposób powstają efekty paskowe i segmentowe.

Tak — każdy przystanek ma własną kontrolę przezroczystości. Przystanek z przezroczystością 0% wygasza gradient, co jest standardowym sposobem na wtopienie zabarwionej nakładki w zdjęcie lub rozmycie sekcji hero w tło strony.

Nie bezpośrednio — przeglądarki nie potrafią przechodzić płynnie między wartościami gradientu. Typowe sztuczki: animuj background-position na powiększonym gradiencie, obracaj gradient stożkowy za pomocą właściwości niestandardowej lub przenikaj między dwoma nałożonymi elementami.

Tak, darmowy i nieograniczony. Działa w całości w Twojej przeglądarce, więc to, co projektujesz, nigdzie nie jest zapisywane ani przesyłane.


Popularne wyszukiwania
generator gradientów css generator gradientu liniowego css gradient promienisty css gradient stożkowy css kreator gradientu tła css narzędzie do punktów kolorów gradientu wybór kąta gradientu css generator gradientów online
Potrzebujesz pomocy?
Masz problem z tym narzędziem? Daj nam znać.
Zgłoś problem

Dodaj to darmowe narzędzie do swojej witryny — skopiuj i wklej poniższy kod.