Degradados y patrones con CSS, sin imágenes

Un fondo con degradado, unas rayas diagonales o una cuadrícula de puntos no necesitan una imagen: CSS los dibuja con funciones de degradado. Pesan cero bytes extra, se ven nítidos a cualquier tamaño y se cambian con una línea. Estos son los degradados y patrones que más se usan.

Siete fondos, ninguna imagen

<div class="muestras">
  <div class="lineal">lineal</div>
  <div class="radial">radial</div>
  <div class="conico">cónico</div>
  <div class="rayas">rayas</div>
  <div class="cuadros">cuadros</div>
  <div class="puntos">puntos</div>
  <div class="mezcla">color-mix</div>
</div>

body { font-family: system-ui, sans-serif; }
.muestras { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.muestras div { height: 90px; border-radius: 8px; display: grid; place-items: end start; padding: 6px; font-size: 0.8rem; }

.lineal  { background: linear-gradient(135deg, #1e64af, #22d3ee); }
.radial  { background: radial-gradient(circle at 30% 30%, #fde68a, #f59e0b 60%, #b45309); }
/* una gráfica de pastel: 45 %, 30 % y 25 % */
.conico  { background: conic-gradient(#1e64af 0 45%, #22d3ee 0 75%, #e3e8ee 0); border-radius: 50%; }

.rayas   { background: repeating-linear-gradient(45deg, #eef3f9 0 10px, #c9d6e4 10px 20px); }
.cuadros { background: repeating-conic-gradient(#c9d6e4 0 25%, #eef3f9 0 50%) 0 0 / 24px 24px; }
.puntos  { background: radial-gradient(#1e64af 2px, transparent 2.5px) 0 0 / 16px 16px, #eef3f9; }

/* la mitad del azul de la marca y la mitad de blanco */
.mezcla  { background: color-mix(in srgb, #1e64af 50%, white); }

Los tres tipos de degradado

• linear-gradient: de un color a otro en línea recta. El primer valor es la dirección: un ángulo (135deg) o palabras (to right).
• radial-gradient: desde un punto hacia afuera. circle at 30% 30% pone el centro arriba a la izquierda, como un brillo.
• conic-gradient: los colores giran alrededor de un centro, como las manecillas. Con cortes en seco (#1e64af 0 45%, y el siguiente desde 0) sale una gráfica de pastel con tres datos, sin JavaScript. Ponle un texto con los porcentajes cerca: los colores solos no dicen nada a un lector de pantalla.

Patrones: degradados que se repiten

• Rayas: repeating-linear-gradient con dos colores y cortes en seco (#eef3f9 0 10px, #c9d6e4 10px 20px).
• Cuadros: un repeating-conic-gradient de cuatro cuartos alternados, en un mosaico de 24 px con background-size.
• Puntos: un radial-gradient pequeño (un círculo de 2 px) repetido cada 16 px, sobre un color de fondo. El medio píxel de diferencia (2px, transparent 2.5px) suaviza el borde.

color-mix: colores intermedios sin calcularlos

color-mix(in srgb, #1e64af 50%, white) mezcla la mitad de un color con la mitad de otro. Sirve para sacar tonos más claros u oscuros de un mismo color de marca, por ejemplo para el fondo de un botón al pasar el ratón: color-mix(in srgb, var(--marca) 85%, black). Al leer el color de esta muestra con JavaScript (getComputedStyle), los tres navegadores devuelven lo mismo:

color calculadocolor(srgb 0.558824 0.696078 0.843137)

No vuelve como rgb(), sino como color(srgb …), con cada canal de 0 a 1: el resultado de color-mix se queda en el espacio de color de la mezcla. Si tu código compara colores como texto, tenlo en cuenta.

Cada fragmento de HTML de esta página pasó por el Nu Html Checker 26.11.4 (el validador del W3C) y cada resultado se pintó y se midió en Chromium, Firefox y WebKit antes de publicarla. Prueba tus cambios en el editor de HTML y CSS o aprende desde cero con el curso.