Herramientas gratuitas
Español
Generador de sombras CSS
Generador de sombras CSS — Elige tamaños o colores y revisa el código o resultado. Los datos de la herramienta quedan en tu dispositivo. Sin cuenta.
Sin cuenta
Cargando herramienta…
Cómo usar
- 1Introduce valores y elige las opciones.
- 2Ejecuta la herramienta y revisa el resultado.
- 3Copia el resultado o cambia los datos para comparar.
A tener en cuenta
Revisa rangos y unidades. Los resultados dependen de los datos y del navegador.
Los anuncios pueden procesar datos de conexión. La personalización respeta tus opciones de privacidad. Privacidad (inglés)
Ejemplo calculado de entrada y salida
Resultados del motor real con los valores de ejemplo, sin datos personales ni trabajos guardados. Carga el ejemplo en la herramienta para ver las mismas entradas.
Entrada de ejemplo
| Campo | Valor |
|---|---|
| Desplazamiento horizontal (px) | 0 |
| Desplazamiento vertical (px) | 8 |
| Desenfoque (px) | 24 |
| Expansión (px) | 0 |
| Color | #0F766E |
| Opacidad (%) | 25 |
Resultado de ejemplo
box-shadow: 0px 8px 24px 0px rgba(15, 118, 110, 0.25);
Requisitos de entrada
Estos son límites reales de validación, no una garantía de que todo valor aceptado sea realista o aplicable a tu caso.
- Desplazamiento horizontal (px): Rango admitido: -1000 ≤ x ≤ 1000
- Desplazamiento vertical (px): Rango admitido: -1000 ≤ x ≤ 1000
- Desenfoque (px): Rango admitido: 0 ≤ x ≤ 1000
- Expansión (px): Rango admitido: -1000 ≤ x ≤ 1000
- Opacidad (%): Rango admitido: 0 ≤ x ≤ 100