Gradientes CSS

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

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

Ubicación Rápida

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

Copiar Código CSS

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

Copiar Colores Individuales

1. Vea los bloques de color debajo del gradiente
2. Haga clic en cualquier bloque de color
3. El código hexadecimal de ese color será copiado
4. 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