CSS & Design
Neumorphism Generator
Create soft UI / neumorphic CSS effects with light direction, shapes, and component presets.
Your files stay on your device - processed locally via WebAssembly, never uploaded
Shape
Light Direction
CSS
background: #e0e5ec; border-radius: 12px; box-shadow: 8px 8px 16px #b0bdcf, -8px -8px 16px #ffffff;
Component Presets
🔒 All CSS generation happens in your browser. Nothing is sent anywhere.
Embed this tool on your website
Copy this code to add the Neumorphism Generator to your site for free. It runs entirely in your visitors' browsers - no API key, no usage limits.
<iframe src="https://optipix.art/embed/neumorphism" width="100%" height="600" style="border:1px solid #e4e4e7;border-radius:8px;" title="Neumorphism Generator by OptiPix" loading="lazy"></iframe> <p style="font-size:12px">Free tool by <a href="https://optipix.art/neumorphism">OptiPix Neumorphism Generator</a></p>
❤️ Love this tool? Support our team.
No ads, no tracking, no limits. Tips keep 104 tools free for everyone.
Secure payment via Stripe · No account needed
About Neumorphism Generator
Last updated: May 2026
OptiPix Neumorphism Generator crea el efecto suave y extrusivo de UI usando CSS box-shadow. Establece el color de fondo (el gris clásico del neumorfismo #e0e5ec o cualquier color), la distancia de la sombra, el desenfoque, la intensidad y la forma (plana, cóncava, convexa o presionada/interior). Elige la dirección de la luz desde las cuatro esquinas. La herramienta calcula automáticamente los colores de sombra clara y oscura coincidentes a partir de tu color de fondo. Previsualiza el elemento sobre un fondo a juego (el neumorfismo requiere que el elemento y el fondo compartan el mismo color). Elige entre los ajustes preestablecidos de componentes: botón, botón presionado, tarjeta, campo de entrada, interruptor y círculo. Copia el CSS generado. Todo se ejecuta localmente en tu navegador.
How It Works
La herramienta toma el color de fondo y calcula una variante más clara y otra más oscura usando manipulación HSL. Estos se convierten en los dos colores de box-shadow, desplazados en la dirección de luz elegida. Las formas planas usan box-shadow estándar; cóncava/convexa añaden una sutil superposición de gradiente; presionado usa sombras interiores.
Use Cases
- •Diseña botones de UI suaves y elementos interactivos
- •Crea componentes de tarjetas neumórficas para paneles
- •Construye campos de entrada y elementos de formulario suaves
- •Diseña interruptores y botones de radio neumórficos
- •Experimenta con el diseño neumórfico para prototipos de aplicaciones
You Might Also Like
If you find Neumorphism Generator useful, check out these related tools: Glassmorphism Generator, CSS Box Shadow Generator, and CSS Gradient Generator. All tools run entirely in your browser with no uploads or signups required.
Explore more: Browse all tools · Step-by-step guides · Tips & tutorials · Compare tools
Frequently Asked Questions
¿Qué es el neumorfismo?
¿Cómo se calculan los colores de las sombras?
¿Qué formas están disponibles?
¿Por qué el color de fondo debe coincidir con el elemento?
¿Se envía algún dato a un servidor?
Related Tools
Glassmorphism Generator
Create frosted glass CSS effects with backdrop blur, transparency, and customizable backgrounds.
CSS Box Shadow Generator
Create CSS box shadows with visual controls, multiple layers, and Material Design presets.
CSS Gradient Generator
Create linear, radial, and conic CSS gradients with a visual editor and presets gallery.
CSS Text Shadow Generator
Create CSS text shadows with visual controls, multiple layers, and creative presets like neon glow, fire, and retro 3D.