Escenario visual y estudio de luz
Extruido (Elevado)Haz clic para alternar el estado
145°
#e0e5ec
Tamaño del elemento240px
Radio de esquinas32px
Distancia de elevación12px
Suavidad del desenfoque24px
Radio de propagación (Spread)0px
Intensidad y contraste15%
Ángulo de incidencia de luz145°
145°
Estudio de luz virtualArrastra la bombilla para posicionar la fuente de luz
Armonización cromática de sombrasAjusta el matiz de la sombra según el fondo para evitar tonos grises apagados
Propiedades personalizadas CSS (:root)Exporta tokens de diseño para una arquitectura CSS limpia y modular
Borde de realce accesible (WCAG AA 3:1)Microborde de 1 px de doble capa para pantallas de bajo contraste
Vector polar: dx=10px, dy=7px | 145°Física O(1)
/* 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);
}Formato: CSS puro | 569 bytesListo para producción
WCAG AA no textual
1.41:1
Activa el borde de realce para monitores de bajo contraste
Vector de luz polar
145° / 12px
Coordenadas opuestas especulares y ambientales
Penumbra gaussiana
24px (Automático 2:1)
Factor de difusión óptica para una percepción de profundidad realista
Procesamiento en el cliente
Cálculo de alto rendimiento ejecutado íntegramente en la memoria local del navegador.
Privacidad sin envíos al servidor
Todos los datos permanecen estrictamente locales sin transmisión a servidores externos.
Listo para producción
Formatos de código limpios y optimizados para su implementación inmediata en producción.
