border-radius: 24px;
background: #e0e0e0;
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff;El generador de neumorfismo CSS crea elementos de interfaz de usuario suave, el estilo en el que una forma se ve suavemente extruida o presionada en el fondo utilizando sombras claras y oscuras emparejadas. Establece el color de la superficie, la distancia de la sombra, el desenfoque, la intensidad del contraste, el radio de esquina y la forma, mira una vista previa en vivo y copia el CSS exacto.
El neumorfismo funciona colocando dos cajas de sombra sobre un elemento que comparte su fondo con la página: una sombra más clara en la parte superior izquierda y una más oscura en la parte inferior derecha. Hacer que los dos colores de sombra y las compensaciones se vean convincentemente suaves es quisquilloso a mano. Esta herramienta deriva automáticamente los tonos claros y oscuros de su color de superficie, por lo que el efecto siempre se ve equilibrado.
Todo se ejecuta en su navegador. Elija un preset, ajuste los controles deslizantes, cambie entre formas planas, cóncavas, convexas y presionadas, y copie el CSS. Sin cuenta, sin cargas, y sigue funcionando sin conexión una vez que la página se ha cargado.
Elija el color de su elemento, que debe coincidir con el fondo de la página detrás de él: el neumorfismo se basa en el elemento y la página que comparten el mismo color base.
Ajusta la distancia, el desenfoque y la intensidad para controlar qué tan lejos se levanta el elemento de la página y qué tan fuerte es el contraste de luz/oscuridad.
Cambiar entre plano, cóncavo, convexo y presionado. Pressed usa sombras insertas para lucir hundidos, mientras que cóncavo y convexo agregan un degradado sutil.
Copie el bloque generado — borde-radio, fondo y la sombra de cuadro pareada— y péguelo en su tarjeta, botón o panel.
Los tonos de sombra claro y oscuro se derivan de su color de superficie, por lo que el efecto Soft-UI siempre se ve equilibrado sin ajustes manuales
Cubierta plana, cóncava, convexa y prensada Looks elevados y hundidos, con prensado con sombras insertadas y cóncavo/convexo Agregando un degradado sutil
Los controles deslizantes para la distancia de sombra, el desenfoque, la intensidad de contraste y el radio de la esquina le permiten marcar el efecto de apenas allí a dramático
La vista previa se encuentra en un fondo coincidente para que las sombras suaves se lean correctamente, actualizándose instantáneamente mientras editas
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
Create frosted-glass UI with a live preview and sliders for backdrop blur, transparency, saturation, color, and radius — then copy production-ready CSS.
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
0 comments
No comments yet. Be the first to share your thoughts!