Box Shadow Generator
Box Shadow Generator — se ejecuta en el navegador. No se guardan datos.
Generador de box-shadow
Introduce los valores y pulsa Calcular.
Vista previa
Al mover los controles, el CSS de box-shadow se actualiza al instante.
Cómo usar
- Fije la posición de la sombra con los deslizadores o números de desplazamiento X y desplazamiento Y. Los valores por defecto son X 0, Y 8.
- Ajuste Desenfoque y Extensión. El desenfoque por defecto es 24.
- Combine el color de sombra y el deslizador de opacidad. El porcentaje de opacidad se muestra al lado.
- Active inset para una sombra interior. Compruébelo al momento en el recuadro de vista previa.
- Copiar el CSS de abajo a una hoja de estilos. Restablecer recupera los valores por defecto.
Conceptos clave
Este generador de box-shadow sirve para afinar box-shadow en tarjetas, botones y modales. X e Y son lo lejos que queda la sombra, el desenfoque es la suavidad del borde y la extensión es el área de sombra. Combinar color y alfa permite sombras del color de marca en lugar de gris. El CSS se actualiza en cuanto mueve un deslizador.
Inset pone la sombra dentro del recuadro, lo que encaja con campos pulsados o sombreado interior. La vista previa es un rectángulo blanco redondeado para un fondo claro. La generación se ejecuta solo en el navegador. Esta pantalla hace una capa; para sombras apiladas, una los valores copiados con comas.
Ejemplo
Los valores por defecto de Y 8, desenfoque 24 y 25 % de opacidad dan una sombra suave hacia abajo. Subir X e Y a 12 profundiza una sombra inferior derecha; activar inset convierte los mismos valores en sombra interior. Pegue el CSS copiado dentro de un selector. Las listas de tarjetas suelen reutilizar una sombra para la jerarquía y dan a los modales un desenfoque mayor. En fondos oscuros puede necesitar más alfa del que sugiere la vista previa blanca. Poner la declaración copiada en una consulta de medios permite reducir la extensión en el móvil. Al reintentar la misma entrada, restablezca y pegue de nuevo para que no se mezcle la salida anterior. En un ordenador compartido, vacíe los campos al terminar. Cerrar la pestaña descarta los valores; no necesita una petición de borrado al servidor.
Relacionado: generador de degradados · selector de color
Preguntas frecuentes
¿Cuándo uso inset en el CSS de box-shadow?
Es una sombra interior. Úselo para sombreado interior de tarjetas o un aspecto de botón pulsado.
¿Los valores de box-shadow se envían a un servidor?
No. La vista previa y la cadena se construyen solo en el navegador.
¿Puedo hacer sombras apiladas?
Esta herramienta hace una capa. Una declaraciones copiadas con comas para varias capas.
¿Dónde va la opacidad?
Se convierte en el alfa del color. Lea el porcentaje al lado del deslizador.
¿Cuál es la diferencia entre extensión y desenfoque?
El desenfoque suaviza el borde; la extensión agranda o encoge el tamaño de la sombra.
¿Puedo cambiar el fondo de la vista previa?
La vista previa es un recuadro blanco fijo. Compruébelo otra vez en el fondo real de su página.
Última revisión: 2026-09-04