Generador de Degradados

Generador de Degradados CSS - Crear Degradados Hermosos

Un potente generador de degradados CSS que crea degradados lineales y radiales con múltiples colores. Características incluyen vista previa en vivo, direcciones y posiciones personalizables, degradados predefinidos y exporta código CSS listo para usar.

¿Qué es un degradado CSS?

Un degradado CSS es una transición suave entre dos o más colores. Se crea usando CSS y no requiere imágenes.

Tipos de degradados:

Degradado Lineal:
- Los colores hacen transición en línea recta
- Puede ir en cualquier dirección
- Sintaxis: linear-gradient(dirección, color1, color2, ...)

Degradado Radial:
- Los colores irradian desde un punto central
- Crea patrón circular o elíptico
- Sintaxis: radial-gradient(forma en posición, color1, color2, ...)

¿Cómo uso las direcciones de degradado?

Las direcciones de degradado controlan dónde fluyen los colores:

Direcciones de Degradado Lineal:
- to right: Izquierda a derecha →
- to left: Derecha a izquierda ←
- to bottom: Arriba a abajo ↓
- to top: Abajo a arriba ↑
- Diagonales: to bottom right ↘

Direcciones de Ángulo:
- 0deg = to top ↑
- 90deg = to right →
- 180deg = to bottom ↓
- 270deg = to left ←

Posiciones de Degradado Radial:
- center: Medio del elemento
- top/bottom/left/right: Posiciones de borde
- Esquinas: top left, top right, etc.

¿Qué son las paradas de color y cómo funcionan?

Las paradas de color definen dónde aparece cada color en el degradado:

Concepto Básico:
- La posición es porcentaje (0-100%)
- 0% = inicio del degradado
- 100% = fin del degradado

Ejemplos:

Dos Colores:
rojo 0%, azul 100%
- Transición suave de rojo a azul

Tres Colores:
rojo 0%, amarillo 50%, azul 100%
- Rojo → amarillo (primera mitad)
- Amarillo → azul (segunda mitad)

Paradas Duras:
rojo 0%, rojo 50%, azul 50%, azul 100%
- Sin transición, cambio de color brusco al 50%

¿Cómo creo un degradado multicolor?

Creando degradados multicolor:

Pasos:
1. Comienza con 2 colores (predeterminado)
2. Haz clic en botón "Agregar Color"
3. Elige color para nueva parada
4. Ajusta posición (0-100%)
5. Repite para más colores

Distribución de Color:

Distribución Uniforme:
3 colores: 0%, 50%, 100%
4 colores: 0%, 33%, 67%, 100%
5 colores: 0%, 25%, 50%, 75%, 100%

Efecto Arcoíris:
Rojo 0% → Naranja 16% → Amarillo 33% → Verde 50% → Azul 66% → Índigo 83% → Violeta 100%

¿Cuáles son los degradados predefinidos?

Degradados predefinidos son combinaciones de colores prediseñadas:

Degradados Disponibles:

Atardecer:
- Colores: #FF512F → #DD2476
- Naranja cálido a rosa vibrante

Océano:
- Colores: #2E3192 → #1BFFFF
- Azul profundo a cian

Bosque:
- Colores: #134E5E → #71B280
- Verde azulado oscuro a verde

Durazno:
- Colores: #ED4264 → #FFEDBC
- Rosa a crema durazno

Sueño Púrpura:
- Colores: #A770EF → #CF8BF3 → #FDB99B
- Degradado púrpura a rosa

Cielo Fresco:
- Colores: #2980B9 → #6DD5FA → #FFFFFF
- Azul a blanco

Llama Cálida:
- Colores: #FF9A56 → #FF6A88 → #FF99AC
- Tonos naranja-rosa cálidos

Desvanecimiento Nocturno:
- Colores: #A18CD1 → #FBC2EB
- Desvanecimiento púrpura a rosa

Características Clave

• Crear degradados lineales y radiales
• Vista previa en vivo con actualizaciones instantáneas
• Agregar paradas de color ilimitadas
• Ajustar posiciones de color con precisión
• Múltiples opciones de dirección
• Soporte de ángulo personalizado (0-360°)
• 8 hermosos degradados predefinidos
• Copiar código CSS al portapapeles
• Generador de degradado aleatorio
• Invertir dirección de degradado
• Exportar CSS listo para usar
• Procesamiento 100% del lado del cliente