Visuelle Neumorphismus-Bühne
Erhaben (Extruded)Klicken zum Umschalten
145°
#e0e5ec
Elementgröße240px
Eckenradius (border-radius)32px
Höhe & Abstand (Distance)12px
Weichzeichnung (Blur)24px
Ausbreitungsradius (Spread)0px
Schattenintensität & Kontrast15%
Lichteinfallswinkel145°
145°
Virtuelles LichtstudioZiehen Sie den Zeiger, um den Lichteinfallswinkel anzupassen
Chromatische FarbharmonieHarmonisiert den Schattenton chromatisch mit der Hintergrundfarbe gegen trübes Grau
CSS-Variablen (:root)Wiederverwendbare Design-Tokens für modulare CSS-Architekturen exportieren
Barrierefreie Lichtkante (WCAG AA 3:1)Subtiler 1px-Mikrorand zur klaren visuellen Kantenabgrenzung auf Monitoren mit geringem Kontrast
Polarvektor: dx=10px, dy=7px | 145°O(1) Echtzeitphysik
/* Neumorphic Soft UI Element */
.soft-ui-surface {
width: 240px;
height: 240px;
border-radius: 32px;
background: #e0e5ec;
box-shadow: 10px 7px 24px #b5c3d5, -10px -7px 24px #e5e9ee;
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s ease;
}
/* Interactive Elevate & Depress States */
.soft-ui-surface:hover {
box-shadow: 13px 9px 30px #b5c3d5, -13px -9px 30px #e5e9ee;
transform: translateY(-2px);
}
.soft-ui-surface:active {
box-shadow: inset 10px 7px 24px #b5c3d5, inset -10px -7px 24px #e5e9ee;
transform: translateY(0);
}Aktives Format: CSS | 569 Bytes100% Produktionsreif
WCAG AA Nicht-Text-Kontrast
1.41:1
Lichtkante für kontrastarme Monitore aktivieren
Polarer Lichtvektor
145° / 12px
Gegenüberliegende Glanz- und Umgebungsvektoren
Gaußscher Halbschatten
24px (2:1 Optische Kopplung)
Optischer Diffusionsfaktor für realistische räumliche Tiefenwahrnehmung
Client-seitige Verarbeitung
Hochperformante Vektor- und Schattengenerierung direkt im lokalen Browserspeicher ohne Verzögerung.
Kein Server-Upload & Datenschutz
Alle Entwürfe, Farbcodes und Parameter bleiben vollständig lokal auf Ihrem Gerät geschützt.
Produktionsreifer Export
Optimierte, direkt einsatzbereite CSS-, Tailwind-, SCSS- und React-Snippets für moderne Webanwendungen.
