Generador de box-shadow CSS
La declaración, no un lienzo que arrastrar.
Los ejemplos sustituyen temporalmente la entrada y los ajustes. Puedes recuperar tu trabajo anterior.
0 caracteres
- sombras
- 1
Resultado
box-shadow: 0px 4px 12px rgba(0,0,0,.15);
Tus archivos se quedan en tu dispositivo
Esta herramienta se ejecuta por completo en tu navegador. Lo que pegas se procesa en tu dispositivo y nunca se envía a un servidor, así que puedes usarla con tokens, claves y textos sin publicar.
Ejemplo
Ejemplo práctico — Generador de box-shadow CSS
Introduce las líneas en orden y usa los ajustes indicados. Compara el resultado con las líneas de salida.
| Elemento | Valor |
|---|---|
| Entrada 1 | 0 4 12 #000000 |
| Propiedad | box-shadow |
| Hacia dentro | Desactivado |
| Salida 1 | box-shadow: 0px 4px 12px #000000; |
La sombra no tiene desplazamiento horizontal, baja 4px y tiene 12px de desenfoque. Su color es negro opaco.
Cómo funciona
- Usa los deslizadores para una sola sombra, o escribe una por línea para varias.
- Una línea es «x y desenfoque extensión color»: cualquier número que falte vale cero.
- Cambia a text-shadow si lo que sombreas es texto.
- Copia la declaración.
Preguntas frecuentes
- ¿Para qué querría más de una sombra?
- Porque una sola casi nunca queda bien. Una sombra real es un borde oscuro apretado más un halo ancho y suave; apilar dos o tres con desenfoques y opacidades distintos es lo que hace que una tarjeta parezca despegada de la página en vez de subrayada.
- ¿Qué hace la extensión?
- Agranda o encoge la sombra antes de desenfocarla. Una extensión negativa la recoge: así se consigue una sombra que se queda debajo del elemento sin asomar por los lados.
- ¿Por qué se ignora la extensión en mi text-shadow?
- Porque text-shadow no tiene extensión: solo admite x, y, desenfoque y color, y si encuentra una cuarta longitud el navegador descarta la declaración entera, así que no se ve ninguna sombra. La página quita ese número del CSS y lo avisa con una nota debajo.
- ¿Qué es «hacia dentro»?
- Dibuja la sombra dentro de la caja en lugar de fuera, que es como se consigue el aspecto de algo hundido. Solo se aplica a box-shadow.
- ¿Se envía algo a un servidor?
- No. Funciona en tu navegador, así que lo que escribas se queda en tu ordenador.
Herramientas relacionadas
◒ Generador de degradados CSS Colores por un lado, una declaración por el otro. ◒ Conversor de color HEX, RGB, HSL y CMYK, más la relación de contraste que decide la legibilidad. ◒ Formateador CSS Una declaración por línea, o todo el archivo en una. ◐ Comprobador de contraste Si alguien puede leerlo de verdad.