Generator neumorfizmu CSS
Twórz efekt neumorphism w CSS: miękkie, podwójne cienie dające wrażenie wytłoczenia. Podgląd i gotowy kod box-shadow — za darmo.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
Kolor bazowy
z niego liczone są oba cienie
Powierzchnia
tło elementu
Odległość cienia
przesunięcie obu cieni
Rozmycie
miękkość cieni
Zaokrąglenie
Intensywność
rozjaśnienie i przyciemnienie cieni
.neu-card {
background: #e6e9ef;
border-radius: 18px;
box-shadow: 14px 14px 28px #bdbfc4, -14px -14px 28px #ebedf2;
}
.neu-card:hover {
box-shadow: 16px 16px 32px #bdbfc4, -16px -16px 32px #ebedf2;
}
.neu-card:active {
box-shadow: inset 16px 16px 32px #bdbfc4, inset -16px -16px 32px #ebedf2;
}
Neumorfizm to jeden element i dwa cienie: ciemny „spod” i jasny „światło”. Silnik liczy ich kolory z tła (bazowego $bg): jasny rozjaśnia o intensywność (maks. 40%), ciemny przyciemnia o tę samą wartość.
| Fragment CSS | Wzór (D = odległość, B = rozmycie) | Rola |
|---|---|---|
| cień ciemny | Dpx Dpx Bpx {ciemny} |
przesunięty w prawo i w dół (+D, +D) — cień rzucany przez element |
| cień jasny | -Dpx -Dpx Bpx {jasny} |
przesunięty w lewo i w górę (−D, −D) — odbite „światło” z lewego górnego rogu |
| stan wciśnięty (pressed / :active) | inset Dpx Dpx Bpx {ciemny}, inset -Dpx -Dpx Bpx {jasny} |
oba cienie z prefiksem inset — element wygląda na wgnieciony w powierzchnię |
| tło (flat i pressed) | background: {powierzchnia}; |
jednolity kolor powierzchni, na którym zlewają się cienie |
| tło (concave i convex) | linear-gradient(145deg, {a}, {b}) |
gradient ±6% jasności powierzchni; convex ma odwróconą kolejność kolorów |
| zaokrąglenie | border-radius: Rpx; |
pole „Zaokrąglenie” — bez niego krawędzie odcinają cienie |
| stany (opcja „Dodaj stany”) | :hover → D+2px, B+4px (mocniejszy cień); :active → inset |
dwa dodatkowe bloki CSS dopisywane silnikiem |
Kolejność cieni w deklaracji nie jest przypadkowa — najpierw ciemny, potem jasny; zamiana ich miejscami odwróci kierunek oświetlenia. Wartości D, B i R w Twoim wyniku są widoczne w kafelkach nad blokiem kodu.
| Styl | Co generuje silnik | Efekt wizualny |
|---|---|---|
| flat — płaski (wypukły) | tło jednolite + box-shadow z dwoma cieniami zewnętrznymi | element lekko wystający z powierzchni |
| concave — wklęsły | gradient 145deg (jaśniejszy → ciemniejszy) + cienie zewnętrzne | powierzchnia jak wygnieciona do środka |
| convex — wypukły | gradient 145deg (ciemniejszy → jaśniejszy) + cienie zewnętrzne | element jak napompowany, z gradienem światła |
| pressed — wciśnięty | tło jednolite + oba cienie z prefiksem inset | przycisk lub pole „wciśnięte” w tło |
Podgląd nad wynikiem renderuje dokładnie te wartości (tło, gradient, border-radius i box-shadow) na dużym kwadracie — to ten sam CSS, który kopiujesz do projektu.
Neumorfizm a dostępność kontrastu — co warto wiedzieć
Kontrast liczysz bez cieni
Kryterium WCAG (4,5:1 dla tekstu, 3:1 dla dużego) dotyczy koloru tekstu i tła — cienie nie podnoszą kontrastu. Neumorficzne powierzchnie mają prawie identyczne tło i element, więc tekst na nich projektuj tak, jakby cieni nie było, i sprawdzaj kontrast miernikiem.
Cień nie może być jedynym sygnałem
Stan wciśnięty (inset) i skupienie na polu muszą być widoczne również bez cieni — użytkownicy z wadami wzroku lub systemowym wyłączonymi efektami nie zobaczą zmiany. Dokładaj obrysy outline/focus-visible i etykiety tekstowe.
Tło w średniej jasności
Neumorfizm działa, bo tło typu #e6e9ef ma zapas zarówno w stronę jaśniejszą, jak i ciemniejszą. Na bardzo jasnym lub bardzo ciemnym tle jeden z cieni znika. Suwak „Intensywność” (1–40%) steruje głębią — ponad 25% robi się teatralnie.
Testuj w skali szarości
Szybki audyt: zrób zrzut ekranu i sprawdź go w grayscale albo rozmyty z dystansu — jeśli przycisk zlewa się z tłem, użytkownicy ze słabszym ekranem też go nie dostrzegą. Dobre ustawienie zachowuje czytelność krawędzi nawet po utracie koloru.
Wskazówka: kafelki nad wynikiem pokazują kolor bazowy, odległość, rozmycie i intensywność na żywo, a „Pobierz .css” zapisuje gotowy fragment arkusza stylów.
Oceń to narzędzie:
Powiązane narzędzia
Inne narzędzia, które mogą Ci się przydaćGenerator neumorfizmu CSS — Twórz nowoczesne elementy Soft UI online
Interaktywny generator neumorfizmu CSS pozwala na szybkie i precyzyjne projektowanie nowoczesnych, trójwymiarowych elementów interfejsu użytkownika w stylu Soft UI.
Czym jest neumorfizm w projektowaniu stron i aplikacji webowych?
Neumorfizm, nazywany również Soft UI, to styl projektowania interfejsów użytkownika, który zyskał popularność jako ewolucja klasycznego skeumorfizmu i minimalistycznego flat designu. Charakteryzuje się on tworzeniem elementów, które wydają się być wytłoczone z tła lub w nim wklęsłe. Kluczem do uzyskania tego efektu jest precyzyjna gra cieni i świateł, która sprawia, że cały interfejs wygląda na spójny, miękki i niezwykle nowoczesny.
W odróżnieniu od tradycyjnych stylów projektowania, neumorfizm opiera się na dopasowaniu koloru elementu dokładnie do koloru jego tła. Trójwymiarowość uzyskuje się nie poprzez zmianę koloru samego przycisku, lecz za pomocą dwóch cieni: jednego jasnego (symulującego światło padające z jednego rogu) oraz jednego ciemnego (reprezentującego cień rzucany po przeciwnej stronie elementu).
Jak działa generator neumorfizmu CSS i jak z niego korzystać?
Nasz generator neumorfizmu CSS to wizualne narzędzie, które pozwala na projektowanie takich elementów bez konieczności ręcznego wyliczania wartości cieni w arkuszu stylów. Za pomocą wygodnych suwaków możesz na bieżąco kontrolować wszystkie parametry generowanego obiektu. Zmiany są widoczne natychmiast na interaktywnym podglądzie, co pozwala na eksperymentowanie z różnymi stylami.
Gdy osiągniesz pożądany efekt wizualny, narzędzie automatycznie wygeneruje kompletny kod CSS, który możesz skopiować jednym kliknięciem. Kod zawiera definicje tła, zaokrąglenia rogów (border-radius) oraz skomplikowane reguły cieniowania (box-shadow). Ułatwia to wdrożenie neumorficznego designu w dowolnym projekcie webowym.
Kluczowe parametry neumorfizmu: rozmiar, rozmycie, odległość i intensywność cienia
Aby stworzyć idealny efekt Soft UI, należy precyzyjnie dostosować kilka kluczowych właściwości cienia. Pierwszym z nich jest rozmiar i zaokrąglenie elementu, które decydują o jego ogólnej geometrii. Następnie reguluje się odległość cieni (offset), która wpływa na to, jak wysoko ponad tło wydaje się unosić dany przycisk czy karta. Większa odległość daje efekt mocniejszego uwypuklenia.
Równie ważne jest rozmycie cienia (blur) oraz jego intensywność. Zbyt ostre cienie zniszczą efekt miękkości, sprawiając, że element będzie wyglądał nienaturalnie. Z kolei zbyt słabe cienie sprawią, że obiekt zleje się z tłem i będzie niewidoczny dla użytkownika. Nasz generator pozwala na płynną regulację tych wartości, gwarantując idealny balans estetyczny.
Zastosowanie stylu Soft UI w nowoczesnych interfejsach użytkownika
Neumorfizm doskonale sprawdza się w projektach aplikacji mobilnych, paneli administracyjnych oraz prostych stron wizytówkowych. Szczególnie dobrze wygląda w minimalistycznych interfejsach, takich jak kalkulatory, odtwarzacze muzyczne czy panele sterowania inteligentnym domem. Dzięki swojej estetyce nadaje aplikacjom ekskluzywny i dopracowany charakter.
Warto jednak stosować ten styl z umiarem. Zbyt wiele neumorficznych elementów na jednej stronie może prowadzić do chaosu wizualnego i utrudnić użytkownikowi nawigację. Najlepiej sprawdza się on w przypadku kluczowych elementów interaktywnych, takich jak przyciski akcji, przełączniki (toggles) czy karty informacyjne, które powinny wyróżniać się na tle reszty layoutu.
Najlepsze praktyki łączenia neumorfizmu z zasadami dostępności (Accessibility)
Jednym z największych wyzwań podczas projektowania w stylu Soft UI jest zapewnienie odpowiedniej dostępności i kontrastu dla osób niedowidzących. Ponieważ elementy neumorficzne mają ten sam kolor co tło, a ich granice są wyznaczane jedynie przez delikatne cienie, mogą być one trudne do zauważenia. Dlatego tak ważne jest świadome dobieranie parametrów projektowych.
Aby zachować zgodność z wytycznymi WCAG, warto łączyć neumorfizm z dodatkowymi wyróżnikami wizualnymi. Może to być subtelna obwódka (border) pojawiająca się po najechaniu kursorem, zmiana koloru tekstu lub ikony wewnątrz przycisku, bądź też zastosowanie wyraźnego stanu skupienia (focus state) dla użytkowników korzystających z klawiatury. Nasz generator ułatwia zachowanie właściwych proporcji cieni, co pomaga w tworzeniu bardziej dostępnych projektów.
Najczęściej zadawane pytania
Co to jest neumorfizm (Neumorphism / Soft UI)?
Neumorfizm to styl w projektowaniu interfejsów użytkownika, który łączy minimalizm z realizmem. Elementy wyglądają, jakby były wytłoczone z tła, co osiąga się za pomocą precyzyjnego nałożenia jasnych i ciemnych cieni CSS.
Jak skopiować i wdrożyć wygenerowany kod CSS na swoją stronę?
Po dostosowaniu wyglądu elementu za pomocą suwaków w naszym generatorze, kliknij przycisk kopiowania pod kodem CSS, a następnie wklej go do arkusza stylów swojej witryny w wybranym selektorze klasy lub identyfikatora.
Jakie parametry mają największy wpływ na efekt neumorfizmu?
Kluczowe parametry to odległość cienia (offset), rozmycie (blur radius) oraz kontrast między jasnym a ciemnym cieniem, które wspólnie decydują o trójwymiarowości i miękkości elementu.
Czy neumorfizm nadaje się do każdego projektu graficznego?
Nie, neumorfizm najlepiej sprawdza się w prostych, minimalistycznych interfejsach z małą liczbą elementów. W złożonych systemach z dużą ilością danych może utrudniać czytelność i nawigację.
Jak zapewnić odpowiedni kontrast przy projektowaniu w stylu Soft UI?
Aby zapewnić dobrą dostępność, warto stosować wyraźny kolor tekstu lub ikon wewnątrz elementów neumorficznych, a także dodawać dodatkowe stany wizualne (np. obramowanie) dla interakcji typu hover i focus.