La versión corta
- Un fondo hero es la imagen, el degradado o el vídeo que va detrás de la primera sección de una página web, y a menudo es el elemento que decide lo rápida que se siente la página.
- Los degradados CSS puros no añaden casi nada a la descarga y escalan a la perfección en cualquier pantalla, lo que los convierte en el fondo hero más rápido.
- Los hero con imagen deben usar un original de 1920 por 1080, formatos modernos como AVIF o WebP y tamaños adaptables, y nunca deben cargarse en diferido.
- Los hero con vídeo necesitan una imagen de póster, reproducción automática silenciada y en línea, y una alternativa fija para quienes prefieren movimiento reducido.
- Sea cual sea el fondo, el titular necesita una zona tranquila con buen contraste en cada tamaño de pantalla.
En esta página
Un fondo hero es el degradado, la imagen o el vídeo que va detrás de la primera sección de una página web. Marca el ambiente de toda la web y, como es lo más grande que se ve al abrir la página, a menudo decide lo rápida que se siente. La opción más rápida es un degradado CSS puro, que se descarga como unas pocas líneas de texto y se mantiene nítido a cualquier tamaño. Las imágenes y el vídeo pueden verse más ricos, pero necesitan cuidar el tamaño, el formato y la carga, como verás abajo.
Esta guía compara los tres enfoques y después cubre tamaños, recortes adaptables, código y contraste del titular. Para el detalle de rendimiento que hay detrás, lee rendimiento de los degradados CSS y webs con vídeo de fondo.
CSS, imagen o vídeo: cómo elegir el fondo hero
| Enfoque | Peso de descarga | Aspecto | Ideal para |
|---|---|---|---|
| Degradado CSS | Casi nulo: forma parte de tu hoja de estilos | Color suave, brillos, mallas suaves | Webs rápidas, páginas de producto, marcas construidas sobre el color |
| Imagen (AVIF, WebP, JPEG) | Moderado: depende del tamaño y el formato | Cualquier cosa: textura, fotografía, grano | Materiales ricos, fotos, arte complejo |
| Vídeo | Pesado: suele ser el archivo más grande de la página | Movimiento, profundidad, atmósfera | Lanzamientos y marcas donde el movimiento es lo esencial |
| WebGL o canvas | Script más coste de renderizado | Color vivo e interactivo | Páginas insignia con presupuesto de rendimiento para ello |
El hero suele contener el Largest Contentful Paint de la página, el momento en que aparece el contenido principal. web.dev considera bueno un LCP de 2,5 segundos o menos. Una imagen o un vídeo hero pesados son el motivo más habitual por el que una página no lo cumple, y por eso la opción más ligera que logra el aspecto buscado es casi siempre la correcta.
Cómo construir un hero con degradado CSS
Superponer dos o tres degradados da para mucho más de lo que parece: un degradado lineal de base para la dirección general y luego brillos radiales suaves para la luz. Mezcla en OKLCH para que los colores intensos sigan vivos. El resultado se renderiza al instante y nunca necesita un archivo más grande para pantallas mayores.
.hero {
min-height: min(92svh, 900px);
display: grid;
place-items: center;
padding: clamp(4rem, 10vw, 8rem) 1.5rem;
color: #fbf8ff;
background-color: #1b1240; /* fallback while gradients paint */
background-image:
radial-gradient(ellipse 60% 50% at 78% 18%, oklch(0.72 0.19 350 / 0.75), transparent 70%),
radial-gradient(ellipse 55% 45% at 15% 85%, oklch(0.62 0.17 250 / 0.7), transparent 70%),
linear-gradient(160deg in oklch, #1b1240, #3a1d78 55%, #120c2c);
}
.hero h1 {
max-width: 16ch;
font-size: clamp(2.75rem, 6vw, 5.5rem);
line-height: 1.04;
text-align: center;
text-wrap: balance;
}radial-gradient(ellipse 60% 50% at 78% 18%, #e0629a 0%, #6b2f9a 45%, #1b1240 100%)Para que un hero CSS no parezca un ajuste predeterminado cualquiera, añade textura. Una capa fina de ruido SVG sobre el degradado oculta las bandas en pantallas grandes y da al color un tacto de material; textura de ruido en CSS muestra cómo. Para un color más rico de varios puntos, los degradados de malla en CSS superponen más brillos.
Tamaño y formatos de la imagen de fondo hero
Si el hero necesita una imagen, crea un original de 1920 por 1080 y exporta versiones más pequeñas para pantallas más pequeñas. Sirve formatos modernos: AVIF y WebP suelen pesar mucho menos que JPEG con la misma calidad visual, con JPEG como respaldo. Carga el hero sin demora y dile al navegador que es importante.
<picture>
<source type="image/avif"
srcset="/hero-960.avif 960w, /hero-1440.avif 1440w, /hero-1920.avif 1920w"
sizes="100vw">
<source type="image/webp"
srcset="/hero-960.webp 960w, /hero-1440.webp 1440w, /hero-1920.webp 1920w"
sizes="100vw">
<img src="/hero-1920.jpg"
alt=""
width="1920" height="1080"
fetchpriority="high"
decoding="async"
class="hero-bg">
</picture>fetchpriority="high" y sin loading="lazy". El texto alternativo vacío la marca como decorativa.Recortes adaptables para fondos hero
Un hero de 16:9 en un móvil se convierte en una franja alta y estrecha. Con object-fit: cover, el navegador recorta desde el centro por defecto, lo que puede eliminar la parte importante. Define object-position para conservar la zona de interés, o sirve un recorte aparte y más alto para pantallas pequeñas con un atributo media en un source.
Escritorio 16:9
1920 × 1080
Tableta, unos 4:3
1600 × 1200
Móvil, vertical
1080 × 1920
Aquí es donde brillan los degradados CSS: los brillos se colocan en porcentajes, así que se mueven con la forma. También puedes cambiar las posiciones en un punto de corte, por ejemplo moviendo el brillo principal de arriba a la derecha en escritorio a arriba en el centro en móviles, donde el titular se apila.
Contraste del titular sobre un fondo hero
Evita
- Un titular que cruza el brillo más luminoso
- Contraste comprobado solo en escritorio
- Una capa oscura sobre toda la imagen para salvar el texto
- Texto de bajo contraste sobre un degradado de tono medio
Haz
- Brillos colocados lejos del titular
- Contraste comprobado en cada punto de corte
- Un velo suave solo donde van las palabras
- Un fondo claramente oscuro o claramente claro detrás del texto
Comprueba el contraste en el punto más claro detrás del titular, no en la media, y apunta al menos a 4,5:1 para el texto pequeño y 3:1 para los títulos grandes. Texto sobre un degradado cubre el método, y texto sobre imagen cubre los hero con foto.
Si diseñas el hero en Gradiently, un Mark se renderiza en vivo a 1920 por 1080 o a cualquier tamaño personalizado y desplaza su zona más tranquila detrás de tus palabras. Exporta un PNG o un JPEG de hasta tres veces el tamaño del diseño para imágenes nítidas en pantallas de alta densidad, o un bucle de 5 a 30 segundos para un hero con vídeo. Recuerda usar el mismo aspecto en tu imagen Open Graph, para que los enlaces compartidos coincidan con la página.
Preguntas frecuentes
¿Qué tamaño debe tener una imagen de fondo hero?
Crea un original de 1920 por 1080 y sirve versiones más pequeñas a las pantallas más pequeñas con srcset. Usa AVIF o WebP con JPEG como respaldo.
¿Un degradado CSS es más rápido que una imagen hero?
Sí. Un degradado CSS son unas pocas líneas en tu hoja de estilos sin nada extra que descargar, y se mantiene nítido a cualquier tamaño. Las imágenes y el vídeo añaden archivos que deben cargar antes de que el hero se vea terminado.
¿Debo cargar en diferido mi imagen hero?
No. El hero se ve al abrir la página, así que cargarlo en diferido solo lo retrasa. Cárgalo sin demora, añade fetchpriority="high" y define su ancho y su alto.
¿Cómo mantengo legible el titular del hero?
Coloca las zonas luminosas lejos de las palabras, usa un velo suave solo detrás del titular si hace falta y comprueba el contraste en cada tamaño de pantalla.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil
