Cómo generar una sombra CSS con box-shadow

Introduce los valores de desplazamiento, desenfoque, extensión y color, y activa la opción interior solo cuando la sombra deba quedar dentro del elemento. La herramienta genera una declaración CSS box-shadow con esos ajustes.

Qué puedes configurar

Esta herramienta sirve para preparar una declaración CSS box-shadow sin escribir a mano cada parte de la sombra. Puedes ajustar el desplazamiento horizontal y vertical, el desenfoque, la extensión, el color y la opción de sombra interior para adaptar el resultado a una tarjeta, un botón, un panel u otro elemento visual. Los campos de personalización son opcionales y parten de unos valores iniciales concretos: 2 para ambos desplazamientos, 5 para el desenfoque, 0 para la extensión, #00000033 para el color y la opción interior desactivada.

Pasos para generar la declaración

1. Abre la herramienta y localiza los controles de la sombra.

2. Introduce, si lo necesitas, el desplazamiento horizontal y el vertical. Estos valores determinan hacia qué lado se separa la sombra del elemento.

3. Define el desenfoque para controlar la suavidad del borde y añade una extensión si quieres modificar el tamaño de la zona sombreada. Los cuatro campos numéricos corresponden a desplazamiento horizontal, desplazamiento vertical, desenfoque y extensión.

4. Especifica el color en el campo de texto. Si no necesitas personalizarlo, puedes conservar el valor inicial que ofrece la herramienta.

5. Activa la casilla de sombra interior cuando quieras que la sombra se dibuje dentro del elemento, en lugar de proyectarse hacia fuera. Déjala desactivada para una sombra exterior.

6. Solicita la generación de la declaración y revisa el resultado. La herramienta añade px a los cuatro valores numéricos y agrega inset cuando la opción interior está activada.

Cómo leer el resultado

El resultado tiene la forma de una declaración box-shadow con los valores en este orden: desplazamiento horizontal, desplazamiento vertical, desenfoque, extensión y color. Por ejemplo, la activación de la sombra interior se reconoce porque aparece inset en la declaración; no es necesario añadirlo manualmente.

Comprueba que cada valor representa la intención del diseño. Un desplazamiento horizontal o vertical igual a 0 mantiene la sombra centrada en ese eje. También se admite el valor 0 en los dos desplazamientos, el desenfoque y la extensión en el caso probado. Si no activas la opción interior, el resultado no incorpora inset.

La declaración generada está pensada para copiarse en la regla CSS del elemento que quieres estilizar. Conviene revisar el aspecto final dentro de tu diseño, porque la herramienta genera los valores de la sombra, pero el resultado visual también depende del fondo, el tamaño y el contraste del elemento.

Ejemplo práctico

Una tarjeta de una interfaz necesita una sombra interior suave y centrada para separar visualmente su contenido.

Para una tarjeta que necesita una sombra suave centrada dentro del borde, introduce 0 en los desplazamientos, 8 en el desenfoque y 0 en la extensión; escribe #00000033 como color, activa la sombra interior y genera la declaración.

Una declaración box-shadow que contiene los valores 0px, 0px, 8px y 0px, el color introducido y la palabra inset porque la opción interior está activada.

Limitaciones

• La información disponible confirma la estructura de la declaración y los controles descritos, pero no establece rangos numéricos, reglas de validación ni límites de salida.

Errores frecuentes

• Si la sombra aparece dentro del elemento cuando querías una sombra exterior, probablemente dejaste activada la opción interior. Desactívala y vuelve a generar la declaración.

Preguntas frecuentes

¿Se pueden usar valores 0 en una sombra CSS?

Sí, si ambos desplazamientos son 0, el desenfoque es 0 y la extensión es 0, el caso probado informa de un resultado correcto. Puedes combinar esos valores con el color que quieras introducir.

¿Cómo creo una sombra interior con box-shadow?

Activa la opción de sombra interior antes de generar la declaración. El resultado incluirá inset junto con los valores de la sombra.

¿Qué valores iniciales ofrece la herramienta?

La herramienta parte de 2 para los desplazamientos horizontal y vertical, 5 para el desenfoque, 0 para la extensión, #00000033 para el color y la opción interior desactivada. Puedes conservarlos o sustituirlos antes de generar el resultado.