Domina `background` con shorthand moderno, múltiples capas y patrones profesionales de UI sin depender de imágenes pesadas.
🎯 Un fondo profesional no es una sola imagen: suele combinar color base, gradiente y textura.
🧠 Con `background` shorthand reduces ruido y dejas claro qué capa hace cada cosa.
🧩 Las capas van por comas: la primera se pinta arriba y la última suele ser fallback.
🛡️ Usa overlays para legibilidad antes de tocar la imagen original.
Piensa en capas como Photoshop, pero en CSS.
La sintaxis clave es `position / size` dentro del shorthand. Ejemplo: `center / cover no-repeat`.
En múltiples fondos, la primera capa queda arriba. Eso te permite meter un gradiente overlay encima de una foto y mejorar contraste sin editar assets.
Menos requests, más control.
Con `repeating-linear-gradient` y `repeating-radial-gradient` puedes crear rayas, puntos y rejillas sin imágenes.
Esto es útil para dashboards, skeletons y fondos técnicos ligeros.
Efecto de borde degradado sin pseudo-elementos.
Un patrón muy útil: dos backgrounds, uno para el relleno y otro para el borde.
Con `padding-box` y `border-box` controlas dónde se pinta cada capa.
Sirve imágenes según densidad sin duplicar CSS.
`image-set()` te deja declarar variantes 1x/2x para mejorar nitidez en pantallas retina.
Acompáñalo siempre con color de fallback para evitar flashes feos mientras carga.
Domina `background` con shorthand moderno, múltiples capas y patrones profesionales de UI sin depender de imágenes pesadas.
Código del tema: display: grid; gap: 1rem;
Piensa en capas como Photoshop, pero en CSS.
La sintaxis clave es `position / size` dentro del shorthand. Ejemplo: `center / cover no-repeat`.
En múltiples fondos, la primera capa queda arriba. Eso te permite meter un gradiente overlay encima de una foto y mejorar contraste sin editar assets.
Menos requests, más control.
Con `repeating-linear-gradient` y `repeating-radial-gradient` puedes crear rayas, puntos y rejillas sin imágenes.
Esto es útil para dashboards, skeletons y fondos técnicos ligeros.
Efecto de borde degradado sin pseudo-elementos.
Un patrón muy útil: dos backgrounds, uno para el relleno y otro para el borde.
Con `padding-box` y `border-box` controlas dónde se pinta cada capa.
Sirve imágenes según densidad sin duplicar CSS.
`image-set()` te deja declarar variantes 1x/2x para mejorar nitidez en pantallas retina.
Acompáñalo siempre con color de fallback para evitar flashes feos mientras carga.
Muestra cómo se compone un fondo profesional en CSS y por qué la primera capa queda arriba.
