Generador de box-shadow CSS
La declaración, no un lienzo que arrastrar.
- 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.
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. La página te avisa cuando has escrito un cuarto número, en lugar de tirarlo en silencio como hace un navegador.
- ¿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.