Generator glassmorphism

Czym jest generator glassmorphism / neumorphism?

*Glassmorphism* i *neumorphism* to dwa style powierzchni, które zobaczysz wszędzie we współczesnym web designie. **Szkło** to efekt matowej szyby: półprzezroczysta karta, która rozmywa wszystko, co jest za nią, często nałożona na kolorowy gradient lub zdjęcie. **Neumorphism** to efekt miękkiego plastiku: karta, która wydaje się wystawać z powierzchni (albo się w nią zapadać), oświetlona parą jasnych i ciemnych cieni w odcieniu tła.

Oba efekty to czysty CSS: bez obrazków, bez JavaScriptu, bez bibliotek. Szkło opiera się na backdrop-filter: blur() z półprzezroczystym wypełnieniem i cienką ramką. Neumorphism powstaje z dwóch deklaracji box-shadow: jednej nieco ciemniejszej od powierzchni i jednej nieco jaśniejszej, przesuniętych w przeciwnych kierunkach. Matematyka jest krótka, ale ręczne dopasowywanie wartości, aż wszystko dobrze wygląda, zajmuje sporo czasu. Generator pomija ten krok.

To narzędzie daje suwaki dla każdego ważnego parametru, panel podglądu na konfigurowalnym tle (żeby efekt szkła miał co rozmywać) i kopiowanie gotowego CSS jednym kliknięciem. Wszystko działa w przeglądarce: wklej fragment prosto do arkusza stylów.

Czego nauczysz się, bawiąc się tymi powierzchniami

• backdrop-filter to właściwość, która napędza glassmorphism. Rozmywa i nasyca wszystko, co jest *za* elementem, a nie sam element.
• Szkło potrzebuje półprzezroczystego wypełnienia (rgba(...) z niską wartością alfa) i cienkiej jasnej ramki, żeby wyglądać jak prawdziwy matowy materiał. Usuń jedno z nich, a efekt się rozpadnie.
• Neumorphism używa **dwóch** deklaracji box-shadow, a nie jednej: ciemniejszego cienia w prawym dolnym rogu i jaśniejszego odblasku w lewym górnym, oba w odcieniu powierzchni, a nie w czystej czerni i bieli.
• Wklęsły neumorphism po prostu dodaje do cieni słowo kluczowe inset: te same liczby, odwrotny kierunek wizualny (wciśnięty, a nie wypukły).
• Szkło potrzebuje kolorowego tła, żeby było widoczne. Na zwykłej bieli rozmycie nie ma czego przetwarzać.

Jak krok po kroku wygenerować powierzchnię szklaną lub neumorficzną

1. 1

   Wybierz tryb stylu

   Przełączaj się na górze między **Szkło** i **Neumorphism**. Szkło potrzebuje tła, a neumorphism leży na jednolitym kolorze powierzchni, który sam ustawiasz.

2. 2

   Ustaw główne parametry

   W szkle najważniejsze są *rozmycie* (jak mocno tło jest rozmazane), *przezroczystość tła* (jak przezierna jest karta) i *odcień* (delikatny kolorowy nalot). W neumorphism najważniejsze są *odległość* (jak daleko przesunięte są cienie), *rozmycie* (jak są miękkie) i *intensywność* (jak bardzo jasny i ciemny cień różnią się od powierzchni).

3. 3

   Wybierz tło lub kolor powierzchni

   Szkło najlepiej wygląda na wyrazistym gradiencie lub zdjęciu. Neumorphism najlepiej wygląda na miękkim, lekko przygaszonym kolorze (#e0e5ec to kanoniczna "neumorficzna szarość"). Narzędzie ma rząd presetów do kliknięcia.

4. 4

   Zmień styl neumorphism

   Neumorphism ma trzy odmiany: **Wypukły** (wystający), **Płaski** (te same cienie, bez wypełnienia gradientem) i **Wklęsły** (wciśnięty). Wypróbuj wszystkie trzy: mają tę samą matematykę cieni, zmienia się tylko kierunek.

5. 5

   Skopiuj CSS

   Kliknij **Kopiuj** i wklej fragment do arkusza stylów. Wynik jest gotowy do produkcji: zawiera -webkit-backdrop-filter z prefiksem dla starszego Safari, uporządkowane właściwości i pasujący border-radius, więc działa jako jedna klasa.

Ściąga szkła i neumorphism

Właściwości, na których faktycznie opiera się każdy efekt. Pełna dokumentacja na stronach MDN o backdrop-filter i box-shadow.

Przykłady powierzchni do wypróbowania

background: rgba(255, 255, 255, 0.18);backdrop-filter: blur(14px) saturate(180%);-webkit-backdrop-filter: blur(14px) saturate(180%);border: 1px solid rgba(255, 255, 255, 0.30);border-radius: 16px;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);

background: linear-gradient(145deg, #f0f5fa, #cdd1d7);border-radius: 24px;box-shadow:  16px 16px 32px #b8bcc1,  -16px -16px 32px #ffffff;

background: #e0e5ec;border-radius: 24px;box-shadow:  inset 8px 8px 16px #b8bcc1,  inset -8px -8px 16px #ffffff;

Częste błędy z glassmorphism / neumorphism

• Zapominanie o -webkit-backdrop-filter. Starsze Safari (i każdy osadzony WebView) ignoruje backdrop-filter bez prefiksu, a twoje szkło staje się pełnym blokiem.
• Używanie czystej czerni i bieli w cieniach neumorficznych. Prawdziwy neumorphism używa dwóch kolorów **bliskich** odcieniowi powierzchni, a czarno-białe cienie sprawiają, że karta wygląda tanio.
• Umieszczanie szkła na zwykłej bieli. Za rozmyciem nie ma koloru, więc efekt znika i zostaje lekko zabarwione pudełko. Szkło potrzebuje bogatego tła.
• Nakładanie zbyt wielu warstw backdrop-filter. Każda to rozmycie na GPU w czasie rzeczywistym: trzy lub cztery na jednym ekranie i dashboard zaczyna gubić klatki.
• Pomijanie sprawdzania dostępności. Tekst na szkle często nie spełnia wymagań kontrastu WCAG, bo prześwituje przez niego tło. Na szklanej karcie zawsze używaj ciemniejszego koloru tekstu niż na nieprzezroczystej bieli.

Generator glassmorphism: FAQ