Generador de box-shadow

Esta herramienta te permite construir efectos de box-shadow de CSS para añadir sombras de caja a tus objetos CSS.

El generador de box-shadow te permite añadir una o más sombras de caja a un elemento.

Al abrir la herramienta, verás un rectángulo en la parte superior derecha. Ese es el elemento al que vas a aplicar las sombras. Cuando este elemento está seleccionado (como lo está al cargar la página por primera vez), puedes aplicarle algunos estilos básicos:

• Establece el color del elemento con el selector de color.
• Dale al elemento un border con la casilla "border".
• Usa los controles deslizantes para establecer las propiedades top, left, width y height del elemento.

Para añadir una sombra de caja, haz clic en el botón "+" de la parte superior izquierda. Esto añade una sombra y la muestra en la columna de la izquierda. Ahora puedes establecer los valores de la nueva sombra:

• Establece el color de la sombra con el selector de color.
• Haz que la sombra sea interior con la casilla "inset".
• Usa los controles deslizantes para establecer la posición, el desenfoque y la extensión del elemento.

Para añadir otra sombra, vuelve a hacer clic en "+". Ahora, los valores que establezcas se aplicarán a esta nueva sombra. Cambia el orden en que se aplican las dos sombras con los botones ↑ y ↓ de la parte superior izquierda. Vuelve a seleccionar la primera sombra haciendo clic en ella en la columna de la izquierda. Para actualizar los estilos del propio elemento, selecciónalo haciendo clic en el botón "element" de la parte superior.

Puedes añadir los pseudoelementos ::before y ::after al elemento y darles también sombras de caja. Para cambiar entre el elemento y sus pseudoelementos, usa los botones "element", "::before" y "::after" de la parte superior.

El recuadro de la parte inferior derecha contiene el CSS del elemento y de los pseudoelementos ::before o ::after que haya.