Efectos visuales

Profundidad y textura

• Superpón varias sombras para lograr efectos de profundidad suaves y realistas.
• Usa filter: drop-shadow() en lugar de box-shadow para formas no rectangulares o PNG transparentes.
• Usa mix-blend-mode y background-blend-mode para las superposiciones de iluminación (limita el alcance con isolation: isolate).

.hero {
  background-image: url('texture.png'), linear-gradient(to bottom, #fff, #eee);
  background-blend-mode: soft-light;
}

Gradientes y color-mix()

Usa in oklch o in oklab para especificar de forma explícita el espacio de color de interpolación para los gradientes o color-mix().

• in oklch conserva mejor el cromatismo, pero puede salirse más fácilmente de la gama del dispositivo, en especial para diferencias más grandes entre colores.
• in oklab permanece en la gama con más facilidad (suponiendo que los extremos están dentro de la gama), pero puede crear colores desaturados y descoloridos en el medio, en especial cuando se interpola entre tonos opuestos.
• NO uses in srgb, a menos que tengas un motivo específico para hacerlo (p.ej., si estás creando un selector de color que necesita interpolar en srgb).

Resguardo

Algunos navegadores anteriores a 2024 no admiten el espacio de interpolación de colores de gradiente. Para admitir estos navegadores, define una variable y usa el token solo cuando sea seguro:

:root {
  --in-oklab: ;
  --in-oklch: ;
}

@supports (linear-gradient(in oklab, white, black)) {
  :root {
    --in-oklab: in oklab;
    --in-oklch: in oklch;
  }
}

Luego, úsala de la siguiente manera:

.card {
  background: linear-gradient(to bottom var(--in-oklab), var(--accent-color), var(--darker));
}

• Importante: Si usas esta técnica, asegúrate de que siempre haya un preámbulo de gradiente no vacío sin ella; de lo contrario, se producirá un error de sintaxis en los navegadores más antiguos.
• NO necesitas esto para color-mix(). Si un navegador admite color-mix(), también admite su argumento in <color-space>.

Patrones

Se pueden crear muchos patrones a través de gradientes de CSS y paradas fijas, y estos pueden ser más flexibles y eficientes que los SVG o las imágenes externas, ya que pueden tener acceso a variables y longitudes de CSS del contexto circundante. No es necesario que repitas la posición dos veces; solo usa 0 o 0%, y la corrección de gradiente la ajustará automáticamente.

Consulta los ejemplos que se incluyen a continuación.

Franjas verticales de 1em de ancho cada una:

background: linear-gradient(to right, var(--color-1) 50%, var(--color-2) 0) 0 / 2em;

Franjas diagonales de 1em de ancho cada una:

background: repeating-linear-gradient(-45deg, var(--color-1) 0 1em, var(--color-2) 0 2em);

Patrón de tablero de ajedrez con 1em cuadrados:

background: repeating-conic-gradient(var(--color-1) 0 25%, var(--color-2) 0 50%) 0 / 2em 2em;

Lunares con puntos de radio de .5em separados por 2em (horizontal o verticalmente; multiplica por sqrt(2) para obtener la distancia diagonal):

--distance: 2em;
--radius: .5em;
--polka: radial-gradient(circle, var(--color-1) var(--radius), transparent calc(var(--radius) + 1px));
background: var(--polka) 0 0, var(--polka) var(--distance) var(--distance) var(--color-2);
background-size: calc(var(--distance) * 2) calc(var(--distance) * 2);

Gráfico circular simple:

.pie {
  --p: 80%;
  width: 60px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--color-1) var(--p), transparent 0%) var(--color-2);
}

Importante: Cuando uses gradientes para renderizar gráficos, asegúrate de que haya un resguardo textual para los lectores de pantalla. OBLIGATORIO: DEBES proporcionar una tabla de datos semánticos como alternativa accesible, tal como se detalla en los Lineamientos de codificación de accesibilidad en los lineamientos de texto y contenido multimedia alternativos.