La biblioteca de gradientes CSS recoge 180 gradientes lineales curados de webgradients.com, cada uno con una previsualización circular y copia de CSS con un clic. Todos los gradientes son gratuitos para uso personal y comercial. Es un punto de partida rápido cuando necesitas un gradiente listo para usar sin diseñarlo desde cero.
Navegar los 180 gradientes
En la parte superior de la página hay una fila de 180 miniaturas. Pasa el cursor sobre cualquiera para ver su nombre; haz clic para desplazarte directamente a esa tarjeta. Es más rápido que bajar por toda la página cuando ya tienes un estilo en mente.
Cada tarjeta también muestra las muestras de color individuales en formato hex que componen el gradiente — haz clic en cualquiera para copiar solo ese valor de color, sin copiar el CSS completo.
El CSS copiado y cómo modificarlo
El código que copias tiene este aspecto:
background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Modificaciones habituales tras copiar:
/* Cambiar el ángulo — 0° = de abajo a arriba, 90° = de izquierda a derecha, 180° = de arriba a abajo */
background-image: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
/* Añadir semitransparencia para superposición sobre imágenes */
background-image: linear-gradient(135deg, rgba(102,126,234,0.8) 0%, rgba(118,75,162,0.8) 100%);
/* Efecto de texto con gradiente */
background-image: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
Para compatibilidad con navegadores más antiguos, añade un fallback de color sólido antes de background-image:
background: #667eea;
background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Legibilidad del texto sobre fondos con gradiente
Los gradientes que abarcan un rango de luminosidad amplio (por ejemplo, de blanco a morado oscuro) pueden dificultar la lectura del texto superpuesto en algunas posiciones. Añadir una capa oscura semitransparente bajo el texto lo resuelve sin cambiar el gradiente:
background-image:
linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Cuándo usar esta biblioteca frente al editor de gradientes
Esta biblioteca ofrece 180 presets fijos — útil para elegir algo ya preparado. Si necesitas diseñar un gradiente personalizado desde cero, apilar múltiples capas de gradiente o usar espacios de color modernos como OKLCH, usa en su lugar la herramienta de editor de gradientes CSS de este sitio.