Diseña sombras de caja visualmente — ajusta desplazamiento, desenfoque, expansión, color y opacidad, y copia el CSS.
La propiedad box-shadow da profundidad a elementos planos. Toma cinco valores: el desplazamiento horizontal, el desplazamiento vertical, el radio de desenfoque, el radio de expansión y el color. Una sombra sutil con un desenfoque grande y un desplazamiento pequeño se lee como elevación; una sombra ajustada con un desplazamiento fuerte se lee como un borde duro. Los diseñadores ajustan estos números por intuición, lo que significa arrastrar deslizadores y ver el resultado — exactamente lo que hace esta herramienta.
La caja de vista previa en el medio muestra la sombra mientras mueves los deslizadores. La línea CSS debajo se actualiza en tiempo real: cópiala y pégala en tu hoja de estilos. La herramienta también soporta sombras inset, que pintan dentro del elemento en vez de fuera — útil para botones presionados, campos de entrada y paneles hundidos.
Todo se ejecuta en tu navegador. La vista previa es un box-shadow CSS real aplicado a un div, no un renderizado ni una aproximación. Lo que ves aquí es lo que verán tus usuarios.
box-shadow: [inset] offset-x offset-y blur-radius spread-radius color
Expande o contrae la sombra antes del desenfoque. Un spread positivo hace la sombra más grande que el elemento; un spread negativo la hace más pequeña. Cero significa que la sombra es del mismo tamaño que el elemento.
Sí, en CSS. Esta herramienta genera una sombra. Para agregar más, sepáralas con comas en tu hoja de estilos.
Pinta la sombra dentro del elemento en vez de fuera. Útil para botones en estado presionado o paneles hundidos.
Sí. La sombra sigue el border-radius del elemento automáticamente.
Porque el deslizador de opacidad necesita un canal alfa. Los colores hex son opacos; rgba permite que la sombra sea semitransparente, lo que se ve más natural.
Vai.la convierte cualquier URL en un enlace corto con estadísticas de clics, código QR y tu propio biolink.
Vai.la no se hace responsable del uso de las herramientas ni de las decisiones tomadas a partir de sus resultados.