Generador de Gradientes — Crear Gradientes CSS
Crea hermosos gradientes CSS con control total sobre colores, posiciones y tipos. Genera código para CSS, TailwindCSS y usa gradientes guardados.
Vista Previa del Gradiente
Configuración del Gradiente
Paradas de Color
Parada 1
Parada 2
Código Generado
.gradient {
background: linear-gradient(to right, #3498db 0%, #e74c3c 100%);
}Herramientas Similares
Descubre otras herramientas útiles de color
Guía Completa para Usar el Generador de Gradientes
Generador de Gradientes es una herramienta online poderosa para crear hermosos gradientes CSS con control total sobre colores, posiciones y tipos. Con este servicio, puedes crear gradientes profesionales para tu diseño.
Paso 1: Elige el Tipo de Gradiente
Selecciona el tipo de gradiente: lineal o radial. Los gradientes lineales crean transiciones suaves en una dirección específica, mientras que los gradientes radiales transicionan del centro a los bordes.
Paso 2: Configura la Dirección o Forma
Para gradientes lineales, elige dirección (hacia arriba, derecha, abajo, izquierda o direcciones diagonales). Para gradientes radiales, elige forma: círculo o elipse.
Paso 3: Añade Paradas de Color
Añade paradas de color haciendo clic en el botón 'Añadir Parada'. Para cada parada, establece color (usando selector de color o entrada HEX) y posición (0-100%). Se requieren mínimo 2 paradas para un gradiente.
Paso 4: Usa Funciones Adicionales
Usa el botón 'Gradiente Aleatorio' para generar un gradiente aleatorio, 'Distribución Uniforme' para distribuir uniformemente las posiciones de las paradas, y 'Invertir Gradiente' para cambiar el orden de los colores.
Paso 5: Copia el Código Generado
Selecciona el formato de código (CSS, TailwindCSS o cadena) y haz clic en el botón 'Copiar'. El código se copiará al portapapeles y estará listo para usar en tu proyecto.
Paso 6: Guarda el Gradiente
Haz clic en el botón 'Guardar Gradiente' para guardar el gradiente actual en el historial. Los gradientes guardados se pueden cargar más tarde o eliminar.
Cómo Usar el Generador de Gradientes
Cómo Crear un Gradiente Lineal
Selecciona tipo 'Lineal' y dirección (por ejemplo, 'hacia derecha'). Añade al menos 2 paradas de color con diferentes colores y posiciones. El gradiente se creará automáticamente.
Cómo Crear un Gradiente Radial
Selecciona tipo 'Radial' y forma (círculo o elipse). Añade paradas de color. El gradiente radial creará una transición suave del centro a los bordes.
Cómo Usar Gradientes TailwindCSS
Después de crear el gradiente, selecciona formato 'TailwindCSS' en el bloque de código. Copia las clases generadas y úsalas en tu HTML con TailwindCSS.
Cómo Guardar y Cargar Gradientes
Haz clic en el botón 'Guardar Gradiente' para guardar el gradiente actual. Los gradientes guardados se muestran en la sección de historial. Haz clic en el gradiente para cargar o en el botón 'Eliminar' para eliminar.
Cómo Usar Gradiente Aleatorio
Haz clic en el botón 'Gradiente Aleatorio' para generar automáticamente un gradiente aleatorio con colores, tipo y dirección aleatorios. Esto es excelente para inspiración.
Cómo Distribuir Uniformemente las Paradas
Haz clic en el botón 'Distribución Uniforme' para distribuir automáticamente de manera uniforme las posiciones de todas las paradas de color. Esto es útil para crear gradientes simétricos.
Preguntas Frecuentes sobre el Generador de Gradientes
¿Qué tipos de gradientes se admiten?
El generador admite dos tipos de gradientes: lineales y radiales. Los gradientes lineales crean transiciones suaves en una dirección específica, mientras que los gradientes radiales transicionan del centro a los bordes.
¿Cuántas paradas de color puedo añadir?
Puedes añadir cualquier número de paradas de color, pero se requieren mínimo 2 paradas para crear un gradiente. Más paradas permiten crear gradientes más complejos e interesantes.
¿Puedo usar gradientes en TailwindCSS?
Sí, el generador crea clases TailwindCSS para tus gradientes. Selecciona formato 'TailwindCSS' en el bloque de código y copia las clases generadas.
¿Cómo guardar un gradiente?
Haz clic en el botón 'Guardar Gradiente' para guardar el gradiente actual en el historial. Los gradientes guardados se almacenan en localStorage del navegador y están disponibles en la próxima visita.
¿Qué es la distribución uniforme?
La distribución uniforme distribuye automáticamente las posiciones de todas las paradas de color de manera uniforme del 0% al 100%. Esto es útil para crear gradientes simétricos.
¿Puedo usar gradientes para el fondo del sitio web?
Sí, los gradientes son perfectos para fondos de sitios web. Copia el código CSS generado y úsalo en la propiedad background de tu elemento.
¿Cómo invertir un gradiente?
Haz clic en el botón 'Invertir Gradiente' para cambiar el orden de los colores en el gradiente. Esto invertirá las posiciones de todas las paradas, creando un efecto inverso.
¿Puedo usar gradientes para diseño móvil?
Sí, los gradientes funcionan muy bien en dispositivos móviles. Los gradientes CSS son totalmente compatibles con navegadores modernos y dispositivos móviles.