Live · Inset · Copia CSS
Generador CSS box-shadow
Ajuste offset, desenfoque, spread, color, opacidad e inset — vista previa, presets y copia CSS — 100 % en el navegador.
Vista previa
Inset / outset
Copia CSS 1 clic
Volade Tools
Generador CSS box-shadow
Sin cuentav1.0.0
2px
2px
5px
0px
20%
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2);Generador CSS box-shadow — Volade
Sombra CSS en vivo: offset, blur, spread, inset — copia en un clic.
Prototipe sombras outset o inset para tarjetas, botones y campos. Volade muestra vista previa y genera box-shadow sin salir del navegador. Volade trabaja en local: abra DevTools → Network y confirme que no hay POST al editar o generar. Tras la primera carga, funciona offline — ideal en clase, tren o redes restringidas. Etiquete exportaciones con fecha y contexto de proyecto para alinear equipos. Pruebe una muestra antes de imprimir, compartir con clientes o importar masivamente. Gratis cubre el día a día; V+ Premium quita marcas de agua y desbloquea exports avanzados. Ningún dato sensible se envía a un backend Volade — verificable en cada sesión. Los parámetros de sombra CSS no salen de la pestaña — portapapeles solo cuando usted decide. Volade trabaja en local: abra DevTools → Network y confirme que no hay POST al editar o generar. Tras la primera carga, funciona offline — ideal en clase, tren o redes restringidas. Etiquete exportaciones con fecha y contexto de proyecto para alinear equipos. Pruebe una muestra antes de imprimir, compartir con clientes o importar masivamente. Gratis cubre el día a día; V+ Premium quita marcas de agua y desbloquea exports avanzados. Ningún dato sensible se envía a un backend Volade — verificable en cada sesión. Los parámetros de sombra CSS no salen de la pestaña — portapapeles solo cuando usted decide. Volade trabaja en local: abra DevTools → Network y confirme que no hay POST al editar o generar. Tras la primera carga, funciona offline — ideal en clase, tren o redes restringidas. Etiquete exportaciones con fecha y contexto de proyecto para alinear equipos. Pruebe una muestra antes de imprimir, compartir con clientes o importar masivamente. Gratis cubre el día a día; V+ Premium quita marcas de agua y desbloquea exports avanzados. Ningún dato sensible se envía a un backend Volade — verificable en cada sesión. Los parámetros de sombra CSS no salen de la pestaña — portapapeles solo cuando usted decide. Volade trabaja en local: abra DevTools → Network y confirme que no hay POST al editar o generar. Tras la primera carga, funciona offline — ideal en clase, tren o redes restringidas. Etiquete exportaciones con fecha y contexto de proyecto para alinear equipos. Pruebe una muestra antes de imprimir, compartir con clientes o importar masivamente. Gratis cubre el día a día; V+ Premium quita marcas de agua y desbloquea exports avanzados. Ningún dato sensible se envía a un backend Volade — verificable en cada sesión. Los parámetros de sombra CSS no salen de la pestaña — portapapeles solo cuando usted decide. Volade trabaja en local: abra DevTools → Network y confirme que no hay POST al editar o generar. Tras la primera carga, funciona offline — ideal en clase, tren o redes restringidas. Etiquete exportaciones con fecha y contexto de proyecto para alinear equipos. Pruebe una muestra antes de imprimir, compartir con clientes o importar masivamente. Gratis cubre el día a día; V+ Premium quita marcas de agua y desbloquea exports avanzados. Ningún dato sensible se envía a un backend Volade — verificable en cada sesión. Los parámetros de sombra CSS no salen de la pestaña — portapapeles solo cuando usted decide. Volade trabaja en local: abra DevTools → Network y confirme que no hay POST al editar o generar.
Por qué creamos esta herramienta
Los generadores de sombra suelen ser desechables y poco documentados. Queríamos una herramienta alineada al design system, privada y repetible.
«Ajusto una sombra en 20 segundos y la pego en el DS.»
Léa P.
Design system
«Inset + fondo de vista evita sorpresas en UI oscura.»
Marc T.
Lead front-end
«Nada va al servidor — ideal para demos sin red.»
Sofia N.
Consultora UX
¿Por qué un generador de sombra local?
Los tokens de sombra forman el lenguaje visual de marca. Experimentar fuera de terceros reduce fugas de maquetas.
Volade combina deslizadores, presets, fondo de vista y guía SEO para que diseño y front compartan referencia.
Puntos clave
- Controle X, Y, blur, spread en píxeles.
- Active inset para sombras interiores.
- Preset Soft gratis; otros en V+.
- Copie la declaración box-shadow en un clic.
- Todo permanece local hasta que usted copie.
Cómo obtener su CSS
Cuatro pasos del preset a la declaración pegada.
En 4 pasos
- 1
Elegir preset
Soft en gratis, o Material / Neo / Glow en V+.
- 2
Ajustar deslizadores
Offset, blur, spread, color, opacidad, inset.
- 3
Validar vista previa
Cambie el fondo para juzgar el contraste.
- 4
Copiar CSS
Un clic y péguelo en su hoja de estilo.
Casos de uso
Contextos donde la sombra debe ser exacta.
1
Tarjetas UI
Armonice elevación entre componentes de una pantalla.
2
Botones y CTA
Añada profundidad sin sacrificar contraste del texto.
3
Campos inset
Simule inputs hundidos para formularios y búsqueda.
4
Design tokens
Documente una sombra de referencia antes del commit al DS.
Volade vs competidores
CSSMatic, Neumorphism.io, SmoothShadow, HTML-CSS-JS, Shadows Brumm y CodePen ofrecen playgrounds útiles con otras prioridades.
Volade prioriza velocidad de producto, presets y docs integrados en el ecosistema.
Nada va al servidor
Los parámetros permanecen en la pestaña. Solo Copiar escribe en el portapapeles local.
| Criterio | Volade | CSSMatic | Neumorphism.io | SmoothShadow | HTML-CSS-JS | Shadows Brumm | CodePen |
|---|---|---|---|---|---|---|---|
| 100 % cliente | Sí | Sí | Sí | Sí | Sí | Sí | Parcial |
| Preset Soft gratis | Sí | Parcial | Parcial | Parcial | Parcial | Parcial | Parcial |
| Modo inset | Sí | Sí | Sí | Sí | Sí | Parcial | Parcial |
| Fondo de vista ajustable | Sí | Parcial | Parcial | Parcial | Parcial | Parcial | Parcial |
| Copia CSS 1 clic | Sí | Sí | Sí | Sí | Sí | Sí | Parcial |
| Docs + ecosistema | Sí | No | No | No | No | No | Parcial |
Comparación orientativa — julio 2026. «Parcial» = función limitada o cuenta requerida.
Volade apunta a flujos repetidos y sensibles con historial y exportación — no a un clic puntual.
Funciones por plan
Gratis cubre deslizadores, Soft, inset y copia. V+ desbloquea presets premium, copia limpia e historial.
| Función | Gratis | V+ Premium |
|---|---|---|
| Vista previa box-shadow | ||
| Offset, blur, spread | ||
| Color + opacidad | ||
| Modo inset | ||
| Preset Soft | ||
| Copia CSS 1 clic | ||
| Presets Material / Neo / Glow | — | |
| Copia sin marca de agua | — | |
| Historial de variantes | — |
Gratis cubre lo esencial. V+ desbloquea exportaciones ampliadas, rejillas grandes y transformaciones.
Sus datos no salen del navegador
Sin subida de CSS. Network al ajustar: sin telemetría de valores de sombra.
Buenas prácticas
Para sombras creíbles en producción.
- Mantenga blur por encima del spread para un look natural.
- Revise el contraste del contenido tras sombras de color.
- Nombre el token (elevation-sm) en el commit.
- Pruebe en fondos claros y oscuros antes del merge.
- Evite sombras demasiado opacas que aplastan la jerarquía.
Ante la duda, pruebe con una muestra antes de imprimir, compartir o importar en masa.
¿Sabía que…?
1×clic para copiar
4presets
0peticiones de red
Preguntas frecuentes
Inset, presets, copia CSS, privacidad y comparación — respuestas breves.
No. Offset, blur, spread, color, opacidad e inset permanecen en memoria local hasta copiar.
DevTools → Network queda vacío al ajustar. Ningún backend Volade recibe valores CSS. Volade trabaja en local: abra DevTools → Network y confirme que no hay POST al editar o generar. Pruebe una muestra antes de imprimir, compartir con clientes o importar masivamente. Los parámetros de sombra CSS no salen de la pestaña — portapapeles solo cuando usted decide. Etiquete exportaciones con fecha y contexto de proyecto para alinear equipos.
V+ Premium
Sombras listas para el design system
Presets premium, copia limpia e historial — en todo Volade.
Prueba 14 días. Sin compromiso.
Recursos relacionados
Última actualización: julio 2026.