Esta herramienta te permite construir CSS box-shadow efectos, para agregar efectos de sombra de cuadro a sus objetos CSS.

El generador de sombras de caja le permite agregar una o más sombras de caja a un elemento.

Al abrir la herramienta, encontrará un rectángulo en la sección superior derecha de la herramienta. Ese es el elemento al que le vas a aplicar sombras. Cuando se selecciona este elemento (tal como está, cuando carga la página por primera vez), puede aplicarle un estilo básico:

  • Establecer el elemento color utilizando la herramienta de selección de color.
  • Dale al elemento un border usando la casilla de verificación “borde”.
  • Utilice los controles deslizantes para configurar el elemento top, left, width, y height propiedades.

Para agregar una sombra de cuadro, haga clic en el botón “+” en la parte superior izquierda. Esto agrega una sombra y la enumera en la columna de la izquierda. Ahora puede establecer los valores de la nueva sombra:

  • Establecer la sombra color utilizando la herramienta de selección de color.
  • Configure la sombra para que se inserte usando la casilla de verificación “insertada”.
  • Utilice los controles deslizantes para establecer la posición, el desenfoque y la propagación del elemento.

Para agregar otra sombra, haga clic en “+” nuevamente. Ahora, cualquier valor que establezca se aplicará a esta nueva sombra. Cambie el orden en el que se aplican estas dos sombras usando los botones ↑ y ↓ en la parte superior izquierda. Seleccione la primera sombra nuevamente haciendo clic en ella en la columna de la izquierda. Para actualizar los estilos propios del elemento, selecciónelo haciendo clic en el botón etiquetado como “elemento” en la parte superior.

Puedes añadir ::before y ::after pseudo-elementos al elemento y darles también sombras de caja. Para cambiar entre el elemento y sus pseudo-elementos, use los botones en la parte superior etiquetados como “elemento”, “: antes” y “: después”.

El cuadro en la parte inferior derecha contiene el CSS para el elemento y cualquier before:: o ::after pseudo-elementos.