CSS
Configura fondos múltiples, imágenes, posiciones, tamaños y gradientes lineales, radiales y cónicos para efectos visuales sin contenido adicional.
Un background puede combinar color e imágenes en varias capas detrás del contenido y del border.
.hero {
background:
linear-gradient(rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.55)),
url("hero.webp") center / cover no-repeat;
}.card {
background-color: var(--surface);
}El color se pinta debajo de todas las background images y sirve como fallback mientras cargan o si fallan.
.surface {
background-image:
radial-gradient(circle at top right, var(--glow), transparent 45%),
linear-gradient(var(--surface), var(--surface));
}La primera capa se pinta encima de las posteriores.
Las listas de position, size y repeat se emparejan por índice y se repiten si tienen menos valores.
background-position: center top;
background-size: cover;cover: llena la caja y puede recortar.contain: muestra toda la imagen y puede dejar espacio.No sustituyen responsive images ni cambian el archivo descargado.
background-origin: padding-box;
background-clip: border-box;.title {
background: linear-gradient(90deg, purple, cyan);
background-clip: text;
color: transparent;
}Este efecto necesita fallback legible y pruebas en forced colors.
background-attachment: fixed;Puede producir costo, comportamientos móviles inconsistentes y problemas con zoom. No lo uses solo por efecto parallax.
background: linear-gradient(
135deg,
var(--brand),
var(--accent)
);Es una imagen generada, no un color.
background: radial-gradient(circle, white, transparent);
background: conic-gradient(from 90deg, red, yellow, green, red);Conic sirve para ruedas, indicadores y patrones; no reemplaza un gráfico accesible de datos.
background: linear-gradient(
to right,
red 0 40%,
blue 60% 100%
);Los hints y stops controlan transiciones y franjas.
background: repeating-linear-gradient(
45deg,
transparent 0 10px,
rgb(0 0 0 / 0.08) 10px 20px
);Útiles para patrones ligeros. Evita ruido visual y moiré.
Una imagen CSS no tiene alt. Úsala para decoración. Si comunica información o funciona como contenido, debe existir en HTML con alternativa apropiada.
.project-hero {
background-color: var(--surface-dark);
background-image:
linear-gradient(to top, rgb(0 0 0 / 0.7), transparent 60%),
image-set(
url("hero.avif") type("image/avif"),
url("hero.webp") type("image/webp")
);
background-position: center;
background-size: cover;
}¿Por qué una imagen informativa no debería existir únicamente como background-image?
Porque CSS no ofrece un equivalente semántico de alt y la imagen puede desaparecer sin dejar la información disponible.
Borders, radius y shadows define límites y profundidad visual.