Que propiedad de CSS crea esta herramienta?

Crea una unica regla box-shadow, por ejemplo box-shadow: 4px 4px 12px 0 rgba(0,0,0,0.2). Copias esa linea y la pegas en tu hoja de estilos o en un estilo inline.

Que hace el interruptor inset?

Inset dibuja la sombra dentro del elemento en lugar de detras, lo que da un aspecto hundido o de brillo interior. Dejalo desactivado para una sombra normal que cae fuera de la caja.

Por que usar expansion y opacidad?

La expansion agranda o reduce la sombra antes de aplicar el desenfoque, asi que un valor positivo la hace mas grande y uno negativo la encoge. La opacidad define la intensidad del color de la sombra, permitiendote pasar de un toque tenue a una sombra fuerte.

Generador de Box Shadow CSS

Desplazamiento X: 0px

Desplazamiento Y: 12px

Desenfoque: 24px

Extensión: 0px

Color de sombra

Opacidad: 25%

Interior

CSS

.element {
  box-shadow: 0px 12px 24px 0px rgba(26, 26, 46, 0.25);
}

Que hace el Generador de Box Shadow

Esta herramienta te ayuda a construir una box-shadow de CSS sin memorizar el orden de los valores ni adivinar numeros. Mueves unos cuantos controles deslizantes, eliges un color y una caja de vista previa en vivo muestra exactamente como queda la sombra mientras el CSS correspondiente se actualiza al lado. Cuando se ve bien, copias la regla y la colocas en tu hoja de estilos. Es util para desarrolladores front-end, diseniadores, estudiantes que aprenden CSS y cualquiera que quiera una sombra limpia para una tarjeta, boton o panel sin ensayo y error en las herramientas de desarrollo del navegador.

Como usarla

Arrastra el control de desplazamiento horizontal para mover la sombra a izquierda o derecha.
Arrastra el control de desplazamiento vertical para mover la sombra arriba o abajo.
Ajusta el control de desenfoque segun lo suave o nitido que quieras el borde.
Ajusta el control de expansion para agrandar o reducir el tamanio de la sombra.
Ajusta el control de opacidad para controlar la intensidad de la sombra.
Elige el color de la sombra con el selector de color.
Activa inset si quieres la sombra dentro del elemento en lugar de detras.
Observa como se actualizan la vista previa y el CSS en vivo, luego copia la regla box-shadow generada.

Un ejemplo rapido

Para una sombra suave y moderna, manten el desplazamiento horizontal cerca de cero, pon un pequenio desplazamiento vertical positivo, sube bastante el desenfoque, deja la expansion en cero y baja la opacidad para que la sombra quede sutil. Eso da el suave efecto de tarjeta elevada que ves en la mayoria de los paneles. A partir de ahi puedes mover un solo control para afinarlo en lugar de reescribir todo el valor a mano.

Todo se ejecuta en tu navegador, asi que no se sube nada. La herramienta es privada, gratuita y no requiere registro.

Preguntas frecuentes

Que propiedad de CSS crea esta herramienta?: Crea una unica regla box-shadow, por ejemplo box-shadow: 4px 4px 12px 0 rgba(0,0,0,0.2). Copias esa linea y la pegas en tu hoja de estilos o en un estilo inline.
Que hace el interruptor inset?: Inset dibuja la sombra dentro del elemento en lugar de detras, lo que da un aspecto hundido o de brillo interior. Dejalo desactivado para una sombra normal que cae fuera de la caja.
Por que usar expansion y opacidad?: La expansion agranda o reduce la sombra antes de aplicar el desenfoque, asi que un valor positivo la hace mas grande y uno negativo la encoge. La opacidad define la intensidad del color de la sombra, permitiendote pasar de un toque tenue a una sombra fuerte.