Saltar al contenido

Generador de sombras CSS

Configura una sombra, mírala en una caja y copia la declaración CSS.

Configura la sombra

Procesado en tu navegador.

−200 a 200 px.

−200 a 200 px.

0–200 px; no admite negativos.

−200 a 200 px.

HEX opaco de 3 o 6 dígitos.

0 transparente; 1 opaco.

Sombra generada

Introduce los valores y genera el CSS.

Cómo generar una sombra CSS

Genera una sola sombra exterior o interior.

  1. Ajusta X e Y.
  2. Define desenfoque y extensión.
  3. Introduce color y opacidad.
  4. Elige exterior o interior.
  5. Genera y copia.

Cuatro longitudes

X e Y desplazan; blur suaviza sin ser negativo; spread expande o contrae.

Exterior e interior

inset dibuja dentro. La sombra no cambia el diseño de la página.

Confirmación

Editar borra el resultado confirmado y la vista previa.

Alcance

  • Una capa.
  • Sin editor completo ni animación.

Ejemplos

12px 12px 24px 0 rgba(0,0,0,.3).

inset 0 4px 8px -2px rgba(0,0,0,.5).

Preguntas frecuentes

¿Blur negativo?

No, CSS no lo permite.

¿Spread negativo?

Sí, contrae la sombra.