Generator neumorfizmu
Projektuj miękkie, wytłaczane powierzchnie UI w stylu neumorfizmu z podwójnymi cieniami i kopiuj CSS.
—
Tło obszaru roboczego odpowiada kolorowi elementu — to właśnie sprawia, że miękki, wytłaczany efekt neumorfizmu działa.
Domyślnie jasny i ciemny cień są wyprowadzane z koloru bazowego. Włącz, aby ustawić je samodzielnie.
O Generator neumorfizmu
Neumorphism Generator projektuje miękki, wypukły wygląd „soft UI”: element, który wygląda, jakby był wyciśnięty z powierzchni znajdującej się za nim — lub wciśnięty w nią. Wybierz jeden kolor bazowy, a narzędzie wyprowadzi z niego wszystko inne, ponieważ efekt działa tylko wtedy, gdy element i jego tło mają ten sam kolor, a głębia powstaje wyłącznie dzięki dwóm przeciwstawnym cieniom box-shadow.
Suwaki kontrolują geometrię: rozmiar, promień zaokrąglenia rogów, odległość cieni, ich intensywność i rozmycie. Cztery tryby kształtu — flat, concave, convex i pressed — zmieniają wewnętrzny gradient i kierunek cienia, a wybór źródła światła przenosi podświetlenie do dowolnego z czterech rogów, tak by pasowało do oświetlenia Twojego projektu.
Domyślnie kolory jasnego i ciemnego cienia są obliczane na podstawie koloru bazowego, ale tryb ręczny pozwala ustawić je samodzielnie. Wygenerowany CSS — background, radius i podwójny box-shadow — jest o jedno kliknięcie.
Jak korzystać z Generator neumorfizmu
- Wybierz kolor bazowy — zostanie zastosowany zarówno do elementu, jak i do tła za nim.
- Wybierz kształt: flat, concave, convex lub pressed.
- Ustaw róg źródła światła, aby kontrolować, gdzie pada podświetlenie.
- Dostosuj rozmiar, promień zaokrąglenia, odległość, intensywność i rozmycie za pomocą suwaków.
- Włącz ręczne kolory cieni, jeśli chcesz nadpisać obliczone tony jasny i ciemny.
- Skopiuj CSS i wklej go na swój element.