Generator neumorfizmu CSS

Czym jest Generator neumorfizmu CSS?

Generator neumorfizmu CSS to darmowe narzędzie wizualne do tworzenia wyglądu soft-UI (neumorfizm), w którym elementy zdają się wystawać z powierzchni lub być w nią wciśnięte za pomocą dwóch przesuniętych cieni w tym samym odcieniu. Powstał z myślą o projektantach interfejsów i programistach front-end, którzy chcą tej subtelnej, namacalnej głębi bez ręcznego dostrajania par box-shadow. Ustaw kolor bazowy za pomocą próbnika lub pola szesnastkowego, przełączaj Kształt między Płaskim, Wklęsłym i Wypukłym oraz reguluj Odległość (jak daleko przesuwają się cienie), Intensywność (siłę kontrastu jasny/ciemny), Rozmycie (miękkość) i Promień (zaokrąglenie narożników). Narzędzie wyprowadza z Twojego koloru bazowego jaśniejsze podświetlenie i ciemniejszy cień oraz łączy je — opcjonalnie nakładając subtelny gradient dla kształtów wklęsłego i wypukłego — w jedną regułę CSS, pokazywaną na żywo na pasującym tle i zwracaną jako kod do skopiowania.

Jak używać Generator neumorfizmu CSS

1. Wybierz kolor bazowy powierzchni za pomocą próbki lub wpisując wartość szesnastkową, np. #e0e5ec.
2. Wybierz Kształt: Płaski dla uniesionego panelu, Wklęsły dla wciśniętego zagłębienia lub Wypukły dla kopulastego wybrzuszenia.
3. Ustaw Odległość, aby przesunąć jasny i ciemny cień dalej na zewnątrz i uzyskać głębszą wypukłość.
4. Dostosuj Intensywność, aby kontrast podświetlenia/cienia był silniejszy lub subtelniejszy.
5. Ustaw Rozmycie dla miększych lub ostrzejszych krawędzi oraz Promień, aby zaokrąglić narożniki.
6. Sprawdź podgląd na żywo, a następnie skopiuj wygenerowany CSS neumorfizmu do swojego arkusza stylów.

Przykłady

kolor #e0e5ec, kształt Płaski, odległość 12, intensywność 15, rozmycie 24, promień 20

border-radius: 20px;
background: #e0e5ec;
box-shadow: 12px 12px 24px #bec3c9, -12px -12px 24px #e5e9ef;

kolor #e0e5ec, kształt Wklęsły, odległość 8, intensywność 15, rozmycie 16, promień 16

border-radius: 16px;
background: linear-gradient(145deg, #d0d5db, #e2e7ed);
box-shadow: 8px 8px 16px #bec3c9, -8px -8px 16px #e5e9ef;

kolor #3a3f47, kształt Wypukły, odległość 6, intensywność 20, rozmycie 12, promień 12

border-radius: 12px;
background: linear-gradient(145deg, #484c54, #363b42);
box-shadow: 6px 6px 12px #2e3239, -6px -6px 12px #61656c;

Najczęściej zadawane pytania

Czym jest neumorfizm?

Neumorfizm (lub soft UI) to styl, w którym elementy zdają się wystawać z jednokolorowej powierzchni lub być w nią wciśnięte, przy użyciu dwóch przesuniętych box-shadow w tym samym odcieniu — jaśniejszego w lewym górnym rogu i ciemniejszego w prawym dolnym. To narzędzie wyprowadza oba cienie z Twojego koloru bazowego, dzięki czemu zawsze pasują do powierzchni.

Jaka jest różnica między Płaskim, Wklęsłym i Wypukłym?

Płaski utrzymuje powierzchnię w jednym pełnym kolorze, więc element wydaje się uniesiony nad tłem. Wklęsły dodaje subtelny gradient ciemniejący ku lewemu górnemu rogowi, sprawiając wrażenie wyżłobienia do wewnątrz. Wypukły odwraca gradient, tak aby środek wyglądał na kopulasto uniesiony. Jasny i ciemny cień pozostają takie same; zmienia się tylko wypełnienie powierzchni.

Jak działają Odległość, Intensywność, Rozmycie i Promień?

Odległość to przesunięcie obu cieni w pikselach — większe wartości odsuwają element dalej od powierzchni. Intensywność określa, o ile jaśniejsze i ciemniejsze są dwa kolory cienia względem koloru bazowego. Rozmycie zmiękcza krawędzie cienia, a Promień zaokrągla narożniki. CSS aktualizuje się na żywo, gdy zmienisz którąkolwiek z tych wartości.

Jakiego koloru użyć dla tła?

Neumorfizm wygląda poprawnie tylko wtedy, gdy element spoczywa na powierzchni w tym samym kolorze bazowym — zastosuj ten sam kolor do elementu nadrzędnego lub tła strony. Podgląd używa Twojego koloru bazowego jako tła, abyś mógł dokładnie ocenić efekt przed skopiowaniem.

Czy moje dane są gdzieś przesyłane?

Nie. Generator działa w całości w Twojej przeglądarce z użyciem JavaScript — Twój kolor i ustawienia nigdy nie są wysyłane na serwer, więc działa prywatnie, a po wczytaniu strony nawet offline.