Cómo usar esta herramienta para desarrolladores
- Define X, Y, blur y spread.
- Escribe un color CSS válido.
- Activa inset si la sombra debe quedar dentro del elemento.
- Genera y copia la declaración.
CSS Box Shadow Generator
Genera box-shadow a partir de desplazamiento, desenfoque, expansión, color e inset. La salida conserva todos los componentes para que puedas comparar sombras de interfaz sin recordar el orden exacto de la sintaxis CSS.
Datos de entrada
Parámetros y código fuenteEspacio publicitario
Qué hace esta herramienta para desarrolladores
Combina los parámetros en el orden estándar de box-shadow y calcula una estimación del alcance exterior de la sombra.
La declaración usa offset-x offset-y blur-radius spread-radius color, precedidos por inset cuando se selecciona.
El navegador determina la apariencia final; el alcance mostrado es una referencia geométrica, no una caja de render exacta.
Ejemplo
box-shadow: 0px 18px 50px -12px rgba(15, 23, 42, 0.25);
Casos de uso
- Tarjetas elevadas.
- Modales.
- Sombras internas.
- Estados hover.
Consejos para obtener resultados fiables
- Usa alfa bajo para sombras de UI.
- Evita blur excesivo en muchos elementos animados.
- Prueba la sombra sobre fondos claros y oscuros.
- Usa spread negativo para sombras más contenidas.
Detalles del procesamiento
Los campos aceptan desplazamientos y spread negativos; blur debe ser cero o positivo.
No valida de forma exhaustiva todos los formatos de color CSS; la cadena se conserva como se introduce.
Preguntas frecuentes
¿Cuál es el orden de valores en box-shadow?
Offset X, offset Y, blur, spread y color; inset puede aparecer al principio o al final según la sintaxis CSS.
¿Puede box-shadow tener spread negativo?
Sí. Un spread negativo contrae la zona inicial de la sombra y suele ayudar a obtener bordes más limpios.
¿El blur de box-shadow puede ser negativo?
No. El radio de desenfoque CSS debe ser cero o positivo.
¿Cómo creo una sombra interior?
Activa la opción inset y la herramienta antepondrá esa palabra clave a la declaración.
¿Puedo usar variables CSS como color?
Sí, el campo de color conserva expresiones como var(--shadow-color) si son válidas en tu hoja de estilos.
Herramientas relacionadas para desarrolladores
Resumen del resultado
| Módulo | Función |
|---|---|
| Entrada | Parámetros configurables |
| Salida | Código listo para copiar |
| Validación | Comprobaciones locales en el navegador |