TF

Projektowanie i CSS

Generator CSS: gradienty, cienie, szkło, easing i bloby

Wizualnie twórz gradienty CSS, warstwowe cienie, karty glassmorphism, krzywe cubic-bezier i bloby SVG.

Twórz gradienty liniowe, radialne lub stożkowe z dowolną liczbą punktów koloru.

Punkty koloru
CSS
background: #0f766e;
background: linear-gradient(135deg, #0f766e 0%, #6366f1 100%);

Gotowe ustawienia

Czym jest to narzędzie?

Pięć generatorów projektowych w jednym miejscu. Twórz gradienty liniowe, radialne i stożkowe; nakładaj miękkie lub ostre cienie; projektuj karty z matowego szkła; przeciągaj krzywą cubic-bezier i oglądaj animację albo generuj organiczne bloby SVG. Każda zmiana od razu aktualizuje podgląd i CSS.

Gradienty obsługują dowolną liczbę punktów koloru i warianty powtarzane, a także jednolity kolor zapasowy. Cienie mogą mieć do sześciu warstw — połączenie małego ostrego cienia z dużym miękkim to sekret realistycznej głębi.

Glassmorphism używa backdrop-filter, by rozmyć to, co jest za półprzezroczystą kartą; działa we wszystkich nowoczesnych przeglądarkach. Edytor przejść tworzy funkcję cubic-bezier(), a wartości Y poza 0–1 dają efekt przestrzelenia. Bloby to gładkie, zamknięte ścieżki do użycia jako SVG lub clip-path CSS.

Jak używać: Generator CSS

  1. Wybierz generator: Gradient, Cień pudełka, Glassmorphism, Krzywa Béziera lub Blob SVG.
  2. Dostosuj suwaki i kolory albo zacznij od gotowego ustawienia.
  3. Podgląd aktualizuje się na żywo przy każdej zmianie.
  4. Skopiuj wygenerowany CSS (lub pobierz SVG) i wklej go do projektu.

Przykłady

Cień warstwowy

box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08),
    0px 4px 8px 0px rgba(0, 0, 0, 0.08),
    0px 12px 24px -4px rgba(0, 0, 0, 0.12);

Najczęstsze pytania

Czy mogę linkować bezpośrednio do generatora?

Tak. Dodaj ?mode=gradient, ?mode=shadow, ?mode=glass, ?mode=easing lub ?mode=blob do adresu strony, a otworzy się od razu ta karta.

Czy glassmorphism działa w każdej przeglądarce?

backdrop-filter działa w aktualnych wersjach Chrome, Edge, Firefox i Safari. Kod zawiera prefiks -webkit- dla starszych wersji Safari.

Czym jest funkcja czasu cubic-bezier?

Określa, jak animacja przyspiesza i zwalnia. Cztery liczby to współrzędne X i Y dwóch punktów kontrolnych; ease-in-out to cubic-bezier(0.42, 0, 0.58, 1).

Czy mogę używać blobów komercyjnie?

Tak. Każdy blob powstaje na twoim urządzeniu i jest twój — możesz go używać wszędzie bez podawania źródła.

Potrzebujesz w przyszłości więcej możliwości?

Narzędzia premium, wyższe limity i dostęp przez API są w planach. Wersja 1 pozostaje darmowa i prywatna w Twojej przeglądarce.