Generador de box-shadow

Crea un box-shadow en CSS y previsualiza el resultado.

Tip: copia el resultado en 1 clic.

CSS

box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.18);

Tip: combina varias sombras separándolas por comas si quieres un efecto más realista.

Datos que necesitas

  • Offset X/Y
  • Blur
  • Spread
  • Color
  • Opacidad
  • Inset

Resultados que obtendrás

  • CSS box-shadow
  • Vista previa

Cómo se calcula

box-shadow: [inset] x y blur spread rgba(...).

Utilidades informativas. No garantizan seguridad total ni sustituyen auditorías técnicas.

Por qué tiene sentido generador de box-shadow

Las conversiones manuales son fuente común de errores tontos que arruinan tareas mayores. Crea un box-shadow en CSS y previsualiza el resultado.

Con offset X/Y, Blur, Spread, Color, Opacidad y Inset como punto de partida, generador de box-shadow entrega cSS box-shadow y Vista previa sin que tengas que repetir operaciones.

El patrón que sigue el generador

El cálculo se reduce a esto: box-shadow: [inset] x y blur spread rgba(...). Esa claridad permite ajustar inputs viendo qué efecto tiene cada variable.

Más allá del primer cálculo, lo útil es ir afinando los inputs hasta que la salida deje de moverse mucho.

Trampas habituales en el cálculo

  • Tratar una salida formateada como salida validada por un sistema externo.
  • Asumir que un generador de IDs cubre necesidades criptográficas reales.
  • Mezclar formatos parecidos (CSV separado por punto y coma vs coma) y atribuir el error al conversor.

Dónde la usarías sin pensarlo

  • Resolver una tarea operativa que solo requiere una salida bien formateada.
  • Cerrar una tarea técnica puntual sin abrir entornos ni instalar nada adicional.
  • Anotar el resultado y volver a él en una segunda revisión más reposada.

Detalles que conviene revisar

  • Comprueba que Offset X/Y, Blur, Spread, Color, Opacidad y Inset están actualizados y que ninguna unidad se ha colado en otro formato.
  • Lee CSS box-shadow y Vista previa con calma: a veces lo importante no es el número, sino el orden de magnitud.
  • Conviene revisar la salida antes de reutilizarla en un flujo real, sobre todo si el dato va a circular fuera de pruebas, documentación o uso interno.

Sobre esta utilidad

Categoría: Tech. Utilidad online con supuestos claros y lenguaje sencillo. Algunas utilidades dependen del país.

Preguntas frecuentes

¿Qué necesito para usar Generador de box-shadow?

Necesitas estos datos: Offset X/Y, Blur, Spread, Color, Opacidad, Inset.

¿Cómo se calculan los resultados?

box-shadow: [inset] x y blur spread rgba(...).

¿Los resultados son oficiales?

No. Son estimaciones orientativas con supuestos simples. Requiere revisión profesional.

Utilidades relacionadas