Una biblioteca de recursos gratuitos de 180 hermosos gradientes lineales. Cada gradiente está cuidadosamente diseñado con colores armoniosos y se puede copiar directamente como código CSS para usar en diseño web, interfaces de UI, decoración de fondos y otros escenarios. Todos los gradientes provienen del proyecto webgradients.com.

Características Principales

Vista Previa de Gradientes

La página muestra 180 efectos de gradiente diferentes, cada uno presentado como un patrón circular con transiciones de color y direcciones claramente visibles. Los gradientes incluyen varios tonos y estilos:

Tonos cálidos: Series de gradientes rojos, naranjas, amarillos
Tonos fríos: Series de gradientes azules, verdes, cian
Tonos neutros: Series de gradientes grises, marrones, beige
Colores vibrantes: Gradientes brillantes de alta saturación
Colores suaves: Gradientes gentiles de baja saturación
Mezclas multicolor: Gradientes complejos con 3 o más colores

Copia Rápida

Cada tarjeta de gradiente proporciona funcionalidad de copia de código CSS con un clic. Haga clic en el botón "Copiar CSS" para copiar el código de propiedad background-image completo al portapapeles para pegarlo directamente en proyectos.

Extracción de Colores

Debajo de cada gradiente se muestran todos los bloques de color que componen ese gradiente. Haga clic en cualquier bloque de color para copiar individualmente el código hexadecimal de ese color, conveniente para usar los mismos colores en otro lugar.

Navegación Rápida

La parte superior de la página proporciona una cuadrícula de miniaturas, cada pequeño cuadrado muestra el efecto del gradiente correspondiente. Pase el cursor para ver el nombre del gradiente, haga clic en la miniatura para desplazarse automáticamente a ese gradiente para una ubicación rápida de los efectos deseados.

Instrucciones de Uso

Explorar Gradientes

Abra la página de Gradientes CSS
Desplácese hacia abajo para explorar todos los efectos de gradiente
Cada tarjeta muestra: nombre del gradiente, vista previa de gradiente circular, bloques de color componentes, botón copiar CSS

Ubicación Rápida

Vea la cuadrícula de miniaturas en la parte superior de la página
Pase el cursor para ver los nombres de los gradientes
Haga clic en las miniaturas para desplazarse automáticamente a ese gradiente

Copiar Código CSS

Encuentre el gradiente preferido
Haga clic en el botón "Copiar CSS" en la esquina superior derecha de la tarjeta
El texto del botón se vuelve verde indicando copia exitosa
Pegue en archivo CSS o etiqueta de estilo
Aplique a elementos que requieren efectos de gradiente

Copiar Colores Individuales

Vea los bloques de color debajo del gradiente
Haga clic en cualquier bloque de color
El código hexadecimal de ese color será copiado
El bloque muestra un borde verde indicando copia exitosa

Escenarios de Aplicación

Fondos Web

Agregue fondos de gradiente a las páginas web para páginas más estratificadas y visualmente atractivas. Se pueden usar para fondos de página principal, fondos de sección, fondos de tarjetas, fondos de botones.

Ejemplo de uso:

.hero-section {
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Decoración de Elementos de UI

Agregue efectos de gradiente a elementos de interfaz: efectos hover de botones y enlaces, fondos de barra de navegación, decoración de barra lateral, etiquetas e insignias.

Divisores y Bordes

Use gradientes para crear divisores únicos:

.divider {
  height: 2px;
  background-image: linear-gradient(90deg, #fa709a 0%, #fee140 100%);
}

Efectos de Texto

Combine con propiedades CSS para crear texto degradado:

.gradient-text {
  background-image: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Superposiciones de Imágenes

Superponga gradientes semi-transparentes en imágenes para mejorar la legibilidad:

.image-overlay {
  background-image: linear-gradient(180deg, rgba(0,0,0,0.5), transparent);
}

Consejos de Uso

Elegir Gradientes Apropiados

Basado en el propósito

Gradientes de fondo: Elija gradientes suaves de bajo contraste para evitar interferir con el contenido
Elementos decorativos: Puede elegir gradientes vibrantes de alto contraste
Fondos de texto: Asegure que el color del texto tenga suficiente contraste con el gradiente para legibilidad

Considere los colores de marca

Busque gradientes cercanos a los colores primarios de la marca
Extraiga colores de gradientes para otros elementos de diseño
Mantenga la coordinación general del color

Ajustar Parámetros de Gradiente

El código CSS copiado se puede modificar aún más:

Cambiar ángulo

/* Original */
linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)

/* Cambiar a gradiente vertical */
linear-gradient(180deg, #a1c4fd 0%, #c2e9fb 100%)

/* Cambiar a gradiente diagonal */
linear-gradient(45deg, #a1c4fd 0%, #c2e9fb 100%)

Ajustar posiciones de color

/* Concentrar transición de color en el medio */
linear-gradient(120deg, #a1c4fd 40%, #c2e9fb 60%)

Agregar transparencia

/* Usar rgba para agregar transparencia */
linear-gradient(120deg, rgba(161,196,253,0.8) 0%, rgba(194,233,251,0.8) 100%)

Uso Combinado

Se pueden superponer múltiples gradientes:

.element {
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.2), transparent),
    linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}

Compatibilidad del Navegador

Los navegadores modernos admiten linear-gradient, pero para mejor compatibilidad agregue prefijos y soluciones alternativas:

.element {
  background: #a1c4fd; /* Fondo de color sólido alternativo */
  background-image: -webkit-linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}

Consideraciones

Todos los gradientes del proyecto de código abierto webgradients.com, gratuitos para uso personal y comercial
Los efectos de gradiente pueden variar ligeramente en diferentes navegadores; se recomienda probar en navegadores principales
Al usar gradientes, preste atención al contraste con el contenido, asegurando que el texto sea claramente legible
El uso excesivo de gradientes puede hacer que el diseño parezca desordenado; se recomienda uso moderado
El código CSS copiado usa valores de color hexadecimales, también convertibles a formatos rgb o hsl
Después de hacer clic en copiar, se requiere pegado manual; confirme copia exitosa antes de cerrar la página
El ángulo de gradiente 0deg es de abajo hacia arriba, 90deg es de izquierda a derecha, y así sucesivamente
Se pueden ajustar parámetros de gradiente en tiempo real en herramientas de desarrollo del navegador para ver efectos
Gradientes claros sobre fondos oscuros, gradientes oscuros sobre fondos claros producen mejores efectos
Para gradientes radiales o cónicos, modifique manualmente el tipo de código CSS