Narzędzia

Generator gradientów CSS

Stwórz gradient CSS: wybierasz dwa kolory, typ (liniowy lub promienisty) i kąt, a narzędzie na żywo pokazuje podgląd i gotowy kod do wklejenia w stylach. Możesz też wylosować ładne zestawienie kolorów. Wszystko dzieje się w przeglądarce.

• Opracował: DobryKalkulator.pl
Jak liczymy ↓
Spis treści
background: ...;

Jak działa kalkulator

Wybierz dwa kolory oraz typ gradientu: liniowy (przejście w wybranym kierunku, ustawianym kątem) albo promienisty (przejście od środka na zewnątrz). Podgląd zmienia się na żywo, a pod nim widać gotowy kod background do wklejenia w arkusz stylów CSS. Przycisk „Losuj kolory” proponuje estetyczne zestawienie.

Jak liczymy (metodologia i wzory)

Generujemy właściwość CSS background z funkcją linear-gradient() lub radial-gradient(). Dla gradientu liniowego kąt podawany jest w stopniach (0° to od dołu do góry, 90° od lewej do prawej). Kolory zapisujemy w formacie HEX. Kod jest w pełni standardowy i działa we wszystkich nowoczesnych przeglądarkach.

Założenia i ograniczenia
  • Generujemy gradient z dwóch kolorów; bardziej złożone przejścia (wiele punktów) można rozbudować, dopisując kolejne kolory w wygenerowanym kodzie.
  • Kolory zapisywane są w HEX; jeśli potrzebujesz RGB lub HSL, użyj konwertera kolorów.
  • Wszystko liczy się lokalnie w przeglądarce.

Źródła i aktualizacja

Umieść ten kalkulator na swojej stronie

Skopiuj kod i wklej go w swoim artykule, kalkulator zadziała u Ciebie, a pod nim pojawi się link do źródła. Za darmo, bez rejestracji.

Motyw:
Podgląd widgetu ↗