Sombras y filtros en CSS

Profundidad y efectos de imagen: sombras de caja y de texto, filtros, modos de fusión.

.card {
  box-shadow:
    0 1px 2px rgb(0 0 0 / 20%),
    0 8px 24px rgb(0 0 0 / 25%);
}

.overlay {
  backdrop-filter: blur(10px) saturate(120%);
}

.logo {
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 40%));
}

.dim {
  filter: grayscale(1) brightness(0.8);
}

Cómo funciona

1. Superponer dos sombras suaves se ve más natural que una dura.
2. filter: blur afecta al elemento; backdrop-filter, a lo que hay detrás.
3. drop-shadow sigue la forma del alfa, a diferencia de box-shadow.

Palabras clave y builtins usados aquí

• blur
• brightness
• filter
• grayscale
• px
• rgb
• saturate

El intento, en números

Líneas

17

Caracteres a escribir

244

Tokens

92

Ritmo de tres estrellas

90 tpm

Al ritmo de tres estrellas de 90 tokens por minuto, este intento toma unos 61 segundos.

Escribe este fragmento

Paso 8 de 8 en Movimiento y efectos; paso 18 de 21 en CSS responsivo y moderno.

← Anterior Siguiente →