Saltar al contenido principal

Generador de Gradientes CSS

Herramienta gratuita en línea para crear visualmente gradientes CSS lineales, radiales y cónicos y copiar el código.

Vista previa

Tipo de degradado

Ángulo

°

Puntos de color

%
%

Código CSS

background: linear-gradient(90deg, #3498db 0%, #e74c3c 100%);

Degradados predefinidos

Características Principales​

  • 3 Tipos: Gradientes lineales, radiales y cónicos
  • Vista Previa en Tiempo Real: Ver cambios instantáneamente
  • Puntos de Color: Agregar hasta 8 puntos de color
  • Control de Ángulo: Establecer ángulo para gradientes lineales/cónicos (0-360°)
  • Control de Posición: Establecer cada posición de color del 0-100%
  • Ajustes Preestablecidos: 6 hermosos gradientes predefinidos
  • Copiar con Un Clic: Copiar código CSS instantáneamente

Tipos de Gradientes​

1. Gradiente Lineal​

background: linear-gradient(90deg, #3498db 0%, #e74c3c 100%);
  • Los colores hacen transición en una dirección
  • Dirección especificada por ángulo (0° = arriba, 90° = derecha, 180° = abajo, 270° = izquierda)
  • Tipo más utilizado

Casos de Uso:

  • Fondos de botones
  • Fondos de encabezados
  • Fondos de tarjetas

2. Gradiente Radial​

background: radial-gradient(circle, #3498db 0%, #e74c3c 100%);
  • Los colores hacen transición desde el centro hacia afuera
  • Crea efectos circulares
  • Útil para efectos de foco

Casos de Uso:

  • Decoraciones de fondo
  • Efectos hover de botones
  • Fondos de logos

3. Gradiente Cónico​

background: conic-gradient(from 90deg, #3498db 0%, #e74c3c 100%);
  • Los colores rotan alrededor del centro
  • Perfecto para gráficos circulares y ruedas de colores
  • Característica relativamente nueva agregada en CSS3

Casos de Uso:

  • Gráficos circulares
  • Anillos de progreso
  • Ruedas de colores

Puntos de Color​

Concepto Básico​

Los puntos de color definen dónde comienzan o terminan colores específicos en un gradiente.

/* 2 colores */
linear-gradient(90deg, #FF0000 0%, #0000FF 100%)

/* 3 colores */
linear-gradient(90deg, #FF0000 0%, #00FF00 50%, #0000FF 100%)

/* 4 colores */
linear-gradient(90deg, #FF0000 0%, #FFFF00 33%, #00FF00 66%, #0000FF 100%)

Consejos de Posición​

  • 0%: Punto de inicio
  • 50%: Punto medio
  • 100%: Punto final
  • Posiciones superpuestas crean transiciones de color bruscas
  • Distribución uniforme crea transiciones suaves

Ejemplos Prácticos​

1. Gradiente de Botón​

.button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

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

2. Superposición de Fondo​

.hero-section {
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
              url('background.jpg');
  background-size: cover;
}

3. Gradiente de Texto​

.gradient-text {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 48px;
  font-weight: bold;
}

4. Barra de Progreso​

.progress-bar {
  background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%);
  height: 8px;
  border-radius: 4px;
  width: 60%; /* estado de progreso */
}

5. Fondo de Tarjeta​

.card {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  padding: 30px;
  border-radius: 12px;
  color: white;
}

Gradientes Preestablecidos​

Sunset (Atardecer)​

background: linear-gradient(90deg, #FF512F 0%, #F09819 100%);

Combinación cálida naranja-rojo, sensación vibrante

Ocean (Océano)​

background: linear-gradient(135deg, #2E3192 0%, #1BFFFF 100%);

Combinación fresca azul-cian, sensación limpia y fresca

Forest (Bosque)​

background: linear-gradient(90deg, #134E5E 0%, #71B280 100%);

Combinación tranquila verde azulado-verde, sensación natural

Purple Dream (Sueño Púrpura)​

background: linear-gradient(45deg, #C471F5 0%, #FA71CD 100%);

Combinación de ensueño púrpura-rosa, moderno y de moda

Fire (Fuego)​

background: radial-gradient(circle, #FDBB2D 0%, #22C1C3 100%);

Combinación radial amarillo-cian, sensación dinámica

Rainbow (Arcoíris)​

background: linear-gradient(90deg, #FF0000 0%, #FFFF00 33%, #00FF00 66%, #0000FF 100%);

Efecto arcoíris de 4 colores, vibrante y animado

Compatibilidad del Navegador​

Gradiente Lineal​

  • ✅ Chrome 26+
  • ✅ Firefox 16+
  • ✅ Safari 7+
  • ✅ Edge 12+
  • ✅ Todos los navegadores móviles

Gradiente Radial​

  • ✅ Chrome 26+
  • ✅ Firefox 16+
  • ✅ Safari 7+
  • ✅ Edge 12+
  • ✅ Todos los navegadores móviles

Gradiente Cónico​

  • ✅ Chrome 69+
  • ✅ Firefox 83+
  • ✅ Safari 12.1+
  • ✅ Edge 79+
  • ⚠️ No compatible con IE

Optimización del Rendimiento​

1. Usar will-change​

.gradient-element {
  will-change: background;
}

Aceleración GPU para animaciones

2. Usar Imágenes para Gradientes Complejos​

Convertir gradientes muy complejos a imágenes para mejor rendimiento

3. Clases Reutilizables​

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

Consejos de Diseño​

1. Selección de Color​

  • Tonos similares: Transición suave
  • Colores complementarios: Contraste fuerte
  • 3 colores o menos: Usualmente suficiente

2. Selección de Ángulo​

  • 90°: Izquierda a derecha (más común)
  • 180°: Arriba a abajo
  • 135°: Diagonal (sensación dinámica)

3. Usar Transparencia​

background: linear-gradient(90deg,
  rgba(52, 152, 219, 0.8) 0%,
  rgba(231, 76, 60, 0.8) 100%
);

4. Animaciones​

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animated-gradient {
  background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}

Consideraciones de Accesibilidad​

1. Relación de Contraste​

El texto sobre gradientes necesita suficiente relación de contraste (estándar WCAG 4.5:1)

2. Legibilidad del Texto​

/* Mejorar legibilidad con sombra de texto */
.text-on-gradient {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

3. Usar Superposiciones​

.gradient-with-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
}

Herramientas Relacionadas​