DevToolPal
PL

Generator gradientów CSS

Twórz wizualnie gradienty CSS liniowe, radialne i stożkowe — punkty koloru, kąt i położenie, podgląd na żywo, gotowe szablony i CSS do skopiowania.

Działa lokalnie, nic nie jest wysyłane

Gradient

Typ
Punkty koloru

Podgląd

CSS

Szablony
CSS gradientu
 
 
 
 
 
Co robi


Generator gradientów CSS pozwala zaprojektować gradient na oko i skopiować gotowy CSS. Wybierz gradient liniowy, radialny lub stożkowy, dodaj dowolnie wiele punktów koloru, przeciągaj ich położenie, ustaw kąt lub środek, a podgląd od razu się zaktualizuje. Możesz też wkleić istniejący linear-gradient(…), radial-gradient(…) lub conic-gradient(…) i edytować go wizualnie. Wszystko działa w przeglądarce.


Jak używać


    

  1. Zacznij od szablonu albo zostaw gradient przykładowy.
    2. 

  2. Wybierz Typ. Gradienty liniowe i stożkowe mają kąt; radialne i stożkowe mają środek, który przesuniesz suwakami Środek X i Środek Y.
    3. 

  3. Edytuj Punkty koloru: zmień kolor próbnikiem lub wpisz dowolny kolor CSS, przeciągnij Położenie, użyj + Dodaj punkt, aby wstawić punkt w największej przerwie, i Odwróć, by zamienić kolejność.
    4. 

  4. Włącz Powtarzaj, aby gradient powielał się jak kafelki, tworząc paski i pierścienie.
    5. 

  5. Skopiuj kod z karty CSS, opcjonalnie z jednolitym kolorem zapasowym dla bardzo starych przeglądarek.
    6. 



Pole CSS gradientu na dole pokazuje wartość gradientu i można je edytować: wklej gradient z arkusza stylów lub narzędzia projektowego, a kontrolki go odczytają.


Przykład


.hero {
  background-color: #667eea;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}


Wskazówki dla ładnych gradientów


    

  • Subtelnie. Dwa sąsiednie odcienie (niebieski w fiolet, pomarańcz w róż) wyglądają łagodniej niż kolory przeciwne, które pośrodku mogą dać brudną szarość.
    • 

  • Dodaj punkt pośredni, aby sterować mieszaniem. Trzeci punkt nieco jaśniejszy od sąsiadów daje miękki odblask.
    • 

  • Twarde punkty tworzą kształty. Punkty w tym samym położeniu dają ostre krawędzie — tak powstają paski, flagi, paski postępu i wykresy kołowe.
    • 

  • Kierunki. to right to 90deg, a to bottom (domyślnie) to 180deg. Kąty liczy się zgodnie z ruchem wskazówek zegara od góry.
    • 

  • Tekst na gradiencie musi być czytelny na całej jego długości. Porównaj najjaśniejszy i najciemniejszy punkt z kolorem tekstu w narzędziu do sprawdzania kontrastu.
    • 

 
  
 
FAQ
 
 
  › Czym różnią się gradienty liniowe, radialne i stożkowe?  
Gradient liniowy miesza kolory wzdłuż prostej pod zadanym kątem. Radialny rozchodzi się od punktu środkowego w kształcie koła lub elipsy. Stożkowy obraca się wokół środka jak wskazówki zegara, więc nadaje się do kół barw i wykresów kołowych.
 
  › Jak uzyskać ostre pasy zamiast płynnego przejścia?  
Ustaw dwa sąsiednie punkty w tym samym położeniu, np. red 50% i blue 50%. Kolor zmieni się w tym miejscu skokowo. Włącz Powtarzaj, aby wzór się powielał — tak powstają paski w CSS.
 
  › Czy mogę używać przezroczystych kolorów?  
Tak. W punkcie możesz wpisać dowolny kolor CSS, także rgba(), hsl() z kanałem alfa, 8-cyfrowy hex albo transparent. Próbnik zachowuje ustawioną przezroczystość, a podgląd pokazuje szachownicę pod przezroczystymi obszarami.
 
  › Czy nadal potrzebne są prefiksy albo kolor zapasowy?  
Prefiksy nie są potrzebne: wszystkie obecne przeglądarki obsługują gradienty liniowe, radialne i stożkowe bez prefiksów. Opcjonalny jednolity kolor zapasowy ma znaczenie tylko w bardzo starych przeglądarkach lub programach czytających background-color, np. w niektórych klientach poczty.