Jeden kolor. Dwa cienie. Efekt wytłoczenia.
One color. Two shadows. An embossed effect.
Wybierz kolor bazowy, a generator sam policzy jasny i ciemny cień w tym samym odcieniu — sedno neumorfizmu, które ręcznie dobrać jest zaskakująco trudno.
Pick a base color, and the generator calculates the light and dark shadow in the same hue — the core of neumorphism, which is surprisingly hard to get right by hand.
background: #e0e5ec;
border-radius: 24px;
box-shadow: 18px 18px 36px #b8bcc2,
-18px -18px 36px #ffffff;
Wybierz kolor bazowy
Pick a base color
Neumorfizm działa najlepiej na stonowanych, jasnych kolorach — jasnoszarym, beżowym, pastelowym.
Neumorphism works best on muted, light colors — light gray, beige, pastel tones.
Dostosuj odległość i rozmycie
Adjust distance and blur
Większe rozmycie niż odległość daje miękki, subtelny efekt — mniejsze rozmycie daje ostrzejsze wytłoczenie.
More blur than distance gives a soft, subtle effect — less blur gives a sharper embossed look.
Skopiuj CSS
Copy the CSS
Kliknij „Kopiuj” i wklej gotowy kod tła i cieni do swojego arkusza stylów.
Click "Copy" and paste the ready background and shadow code into your stylesheet.
- Przełączniki, przyciski i pola formularzy w miękkim stylu UI.
- Karty i panele w aplikacjach z jasnym, stonowanym motywem.
- Wskaźniki stanu — wciśnięty/aktywny (wklęsły) kontra spoczynkowy (wypukły).
- Toggles, buttons, and form fields in a soft UI style.
- Cards and panels in apps with a light, muted theme.
- State indicators — pressed/active (concave) vs resting (convex).
Czym jest ten generator? To narzędzie do budowania efektu neumorfizmu — miękkiego, "wytłoczonego" wyglądu interfejsu, gdzie element wygląda jakby był uformowany z tego samego materiału co tło, zamiast leżeć na nim jako osobna warstwa.
What is this tool? A tool for building the neumorphism effect — a soft, "embossed" interface look where an element seems molded from the same material as the background, instead of sitting on top of it as a separate layer.
Czym jest neumorfizm?
What is neumorphism?
Neumorfizm (neumorphism, "soft UI") to styl interfejsu, w którym elementy mają ten sam kolor co tło, a głębię uzyskuje się wyłącznie przez dwa przeciwstawne cienie — jasny i ciemny — zamiast kontrastujących kolorów czy obramowań.
Neumorphism ("soft UI") is an interface style where elements share the background's color, and depth comes purely from two opposing shadows — light and dark — instead of contrasting colors or borders.
Dlaczego kolor tła i elementu muszą być takie same?
Why must the background and element colors match?
To właśnie definiuje neumorfizm — jeśli kolory się różnią, element wygląda jak zwykła karta z cieniem, nie jak "wytłoczenie" tego samego materiału. Dlatego generator używa jednego koloru bazowego dla obu.
That's exactly what defines neumorphism — if the colors differ, the element looks like an ordinary card with a shadow, not like an "embossing" of the same material. That's why the generator uses one base color for both.
Czym różni się tryb wypukły od wklęsłego?
How does convex mode differ from concave?
Tryb wypukły używa zwykłych cieni — element wygląda jakby wystawał ponad
tło. Tryb wklęsły dodaje inset do obu cieni — element wygląda jakby był
wciśnięty w tło, jak przycisk w trakcie kliknięcia.
Convex mode uses regular shadows — the element looks like it's raised above
the background. Concave mode adds inset to both shadows — the element looks
pressed into the background, like a button mid-click.
Czy neumorfizm ma problemy z dostępnością?
Does neumorphism have accessibility issues?
Tak, to jego znana słabość — niski kontrast między elementem a tłem utrudnia rozpoznanie granic klikalnych obszarów, szczególnie osobom słabiej widzącym. Warto dodać dodatkowy sygnał (np. zmianę cienia przy hover/focus) niezależny od samego koloru.
Yes, that's its known weakness — low contrast between the element and background makes it hard to spot clickable boundaries, especially for people with lower vision. It's worth adding an extra signal (e.g. a shadow change on hover/focus) independent of color alone.
Czy narzędzie wysyła moje dane gdziekolwiek?
Does the tool upload my data anywhere?
Nie. Generator działa w całości w Twojej przeglądarce.
No. The generator runs entirely in your browser.
Czym jest CSS Neumorphism Generator?
Neumorfizm zyskał popularność jako alternatywa dla płaskiego designu (flat design) i materialnych cieni (material design) — zamiast ostrych kontrastów, oferuje miękkie, niemal organiczne wrażenie, jakby interfejs był wyrzeźbiony z jednego kawałka materiału. Sedno efektu leży w matematyce dwóch cieni, którą trudno dobrać metodą prób i błędów bez podglądu.
Jak liczone są kolory cieni
Generator bierze wybrany kolor bazowy i tworzy dwie jego pochodne: jaśniejszą (symulującą światło padające z jednej strony) i ciemniejszą (symulującą cień rzucany po przeciwnej stronie). Im wyższa intensywność kontrastu, tym dalej te pochodne odchodzą od koloru bazowego — zbyt wysoka wartość sprawia, że efekt przestaje wyglądać subtelnie i zaczyna przypominać zwykły, mocny cień.
Wypukły kontra wklęsły
- Wypukły — domyślny stan elementu, sprawia wrażenie uniesienia nad tłem.
- Wklęsły — stan aktywny/wciśnięty, cienie
insetsprawiają wrażenie wgłębienia. - Przełączenie między trybami przy kliknięciu to częsty sposób sygnalizowania interakcji w neumorfizmie.
Praktyczne wskazówki
Neumorfizm sprawdza się najlepiej na jasnych, stonowanych tłach — na bardzo ciemnych albo bardzo nasyconych kolorach efekt traci czytelność. Zawsze dodaj alternatywny sygnał stanu (obramowanie przy focus, zmianę kursora, ikonę) niezależny od samych cieni, żeby nie polegać wyłącznie na subtelnym kontraście, który bywa trudny do dostrzeżenia.
Wdrożenie w produkcji
Skopiowany kod wklej jako styl elementu — przycisku, karty czy pola input. Jeśli element
ma reagować na kliknięcie, przygotuj drugą wersję kodu w trybie wklęsłym i przełączaj klasę
CSS przy evencie :active albo przez JavaScript.
What is a CSS Neumorphism Generator?
Neumorphism gained popularity as an alternative to flat design and material design shadows — instead of sharp contrasts, it offers a soft, almost organic feel, as if the interface were carved from a single piece of material. The core of the effect lies in the math of two shadows, which is hard to get right through trial and error without a preview.
How shadow colors are calculated
The generator takes the chosen base color and creates two derivatives: a lighter one (simulating light falling from one side) and a darker one (simulating a shadow cast on the opposite side). The higher the contrast intensity, the further these derivatives drift from the base color — too high a value makes the effect stop looking subtle and start resembling an ordinary, heavy shadow.
Convex vs concave
- Convex — the element's default state, giving an impression of being raised above the background.
- Concave — an active/pressed state, where
insetshadows create an impression of depression. - Switching between modes on click is a common way to signal interaction in neumorphism.
Practical tips
Neumorphism works best on light, muted backgrounds — on very dark or very saturated colors the effect loses readability. Always add an alternative state signal (a focus outline, a cursor change, an icon) independent of the shadows alone, so you're not relying solely on a subtle contrast that can be hard to notice.
Using it in production
Paste the copied code as the style of an element — a button, a card, or an input field. If
the element should react to a click, prepare a second version of the code in concave mode
and toggle the CSS class on :active or via JavaScript.
Sprawdź też inne generatory CSS.
Check out the other CSS generators too.
Cienie, efekty szkła, zaokrąglenia i grid — wszystko w jednym miejscu, bez instalacji.
Shadows, glass effects, border radius, and grid — all in one place, no install needed.