Generator CSS

Galeria Gradientów CSS

Stwórz dopracowany zestaw gradientów ze swoich kolorów, porównaj wiele kierunków i stylów renderowania, a następnie skopiuj dokładnie taki kod CSS, jakiego potrzebujesz dla tła, sekcji hero lub interfejsu produktu.

  • Generuj warianty liniowe, radialne i stożkowe z jednego zestawu danych.
  • Kopiuj pełne deklaracje CSS lub czystą funkcję gradientu jednym kliknięciem.
  • Waliduj punkty zatrzymania (stops) i kolory przed eksportem czegokolwiek.
  • Losuj gotowe zestawy, gdy potrzebujesz szybkich efektów zamiast pustego formularza.

Zbuduj swój zestaw gradientów

Wybierz typ podstawowy, zdefiniuj do czterech punktów koloru, a następnie wygeneruj galerię wariantów. Puste punkty dodatkowe są bezpiecznie ignorowane.

Używane dla gradientów liniowych i stożkowych. Wartości są ograniczone do zakresu 0-360 stopni.
Punkty koloru (stops)
Użyj kolorów hex. Pozycje są zaokrąglane do pełnych procentów i muszą być w porządku rosnącym.

Kopiowany kod ma formę background: ...;. Karty podglądu pokazują również samą funkcję gradientu.

Ten wynik odzwierciedla wybrany typ podstawowy. Karty galerii poniżej pokazują alternatywne kierunki i style przy użyciu tych samych kolorów.

6 Warianty galerii
Pełne % Zaokrąglanie

Renderowanie może się nieznacznie różnić między przeglądarkami, a duże gradienty stożkowe mogą wykazywać "pasmowanie" na niektórych ekranach. Eksportowane pozycje są ograniczone do zakresu 0-100 i zaokrąglane do liczb całkowitych dla przewidywalnego kodu CSS.

Porównaj wygenerowane warianty obok siebie, a następnie skopiuj wersję, która najlepiej pasuje do Twojego układu, zamiast ręcznie zmieniać parametry.

Jak to działa

Generator pobiera aktywne punkty koloru, czyści każdą wartość i buduje bazowy ciąg gradientu. Na tej podstawie tworzy małą galerię powiązanych kątów, rozmieszczeń radialnych i rotacji stożkowych, dzięki czemu możesz przejrzeć realistyczne alternatywy bez zmiany palety kolorów.

Używane są tylko poprawne kolory hex. Opcjonalne puste kolory są pomijane. Pozycje punktów są sortowane tylko wtedy, gdy dane są już poprawne; jeśli punkt ma mniejszą wartość niż poprzedni, strona zgłasza błąd zamiast cichej zmiany danych. Dzięki temu wyeksportowany kod CSS jest zgodny z tym, co wprowadzono.

Akcje kopiowania najpierw próbują użyć Clipboard API, a w razie potrzeby korzystają z tymczasowego obszaru tekstowego. Jeśli kopiowanie jest niedostępne, kod CSS pozostaje widoczny w bloku kodu, który można zaznaczyć ręcznie.