Añade la entrada
Geometría, color, transparencia y modo de la sombra.
Mesa de diseño
Generador de sombras CSS
Diseña una sombra equilibrada y copia la declaración CSS exacta.
Privacidad integradaTu trabajo permanece contigo
Vista previa de la sombra
box-shadow: 0px 18px 45px -12px rgba(15, 23, 42, 0.28);Tu trabajo permanece privado en el navegador mientras usas esta herramienta.
¿Qué hace generador de sombras css?
Compone una sombra CSS con desplazamientos horizontal y vertical, desenfoque, extensión, color, opacidad y modo interior opcional, con vista previa y declaración copiable.
- Entrada
- Geometría, color, transparencia y modo de la sombra.
- Resultado
- Una declaración CSS box-shadow con vista previa.
- Precio
- Gratis
- Cuenta
- No necesaria
Cómo usar generador de sombras css
Elige los ajustes
Diseña una sombra equilibrada y copia la declaración CSS exacta.
Guarda o copia
Una declaración CSS box-shadow con vista previa.
Consejo práctico
Las sombras suaves suelen funcionar mejor con poca opacidad y un desenfoque amplio.
Cuándo usar generador de sombras css
Ajustar una elevación de baja opacidad para una tarjeta o panel flotante.
Crear un tratamiento interior para un control pulsado o una superficie hundida.
Probar extensiones negativas para mantener cerca del elemento un desenfoque amplio.
Ejemplo
Un ejemplo concreto de generador de sombras css
- Entrada
- Color de sombra #0F172A
- Ajustes
- x 0px, y 18px, desenfoque 45px, extensión -12px, opacidad 28 %, exterior
- Resultado
- box-shadow: 0px 18px 45px -12px rgba(15, 23, 42, 0.28);
Qué puedes esperar
Cómo funciona
El color HEX se convierte en canales RGB enteros y se combina con la opacidad como rgba(). Los cuatro controles geométricos se serializan en el orden de box-shadow; el modo interior añade inset al principio.
Antes de usarla
Límites y casos especiales
- Solo se genera una capa; las sombras ambientales y principales superpuestas deben combinarse manualmente.
- Los controles están limitados a los rangos mostrados: desplazamientos de -60 a 60px, desenfoque de 0 a 100px y extensión de -40 a 50px.
Normas y fuentes
Preguntas frecuentes
Preguntas sobre Generador de sombras CSS
¿generador de sombras css es gratis?
Sí. Generador de sombras CSS se puede usar gratis.
¿generador de sombras css mantiene privado mi trabajo?
Sí. Tu trabajo permanece privado mientras usas la herramienta; no se sube lo que introduces.
¿Qué hace una extensión negativa?
Contrae la forma base de la sombra antes del desenfoque y puede mantener una sombra suave más cerca del elemento.
¿Puede generar varias sombras separadas por comas?
No. Genera una sola. Copia varios valores y únelos con comas cuando necesites capas.