Generador de gradientes
Tipo de gradiente
Ajustes
Paradas de color
Ajustes predefinidos
Avance
Código CSS
background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);
Háganoslo saber
Por favor, comparte tu experiencia.
4.9 (2.8k ratings)
Acerca de Generador de gradientes
Genera degradados CSS al instante y gratis. Crea degradados lineales y radiales con múltiples colores. Personaliza el ángulo, la posición y los puntos de color. Copia el código CSS directamente. Ideal para diseño web y desarrollo de interfaces de usuario. No requiere registro: funciona al 100% en tu navegador.
Cómo usar
Paso 1
Seleccione el tipo de gradiente: Lineal, Radial o Cónico
Paso 2
Agregue y personalice puntos de color (mínimo 2 colores).
Paso 3
Ajustar la configuración específica del tipo (ángulo, forma, posición)
Paso 4
Visualiza tu degradado en tiempo real.
Paso 5
Utiliza ajustes preestablecidos para inspirarte rápidamente o generar degradados aleatorios.
Paso 6
Copia el código CSS para usarlo en tus proyectos.
Características y beneficios
- ✅3 tipos de gradiente: lineal, radial y cónico.
- ✅Puntos de color ilimitados con control de posición
- ✅Personalización completa: colores, ángulos, formas, posiciones.
- ✅8 hermosos preajustes: Atardecer, Océano, Bosque, Sueño púrpura, Fuego, Azules fríos, Arcoíris, Melocotón
- ✅Generador de gradiente aleatorio para inspiración
- ✅Vista previa en tiempo real mientras personaliza
- ✅Copiar código CSS al portapapeles con un solo clic.
- ✅Arrastra los controles deslizantes para ajustar las posiciones de color.
- ✅100% gratis - sin marcas de agua, sin necesidad de registrarse
- ✅Funciona sin conexión: toda la generación se realiza en tu navegador.
Preguntas frecuentes
¿Qué tipos de gradiente son compatibles?
Admitimos 3 tipos de degradados CSS: Lineal (degradados de línea recta con ángulo ajustable de 0 a 360°), Radial (degradados circulares o elípticos desde un punto central) y Cónico (degradados circulares que giran alrededor de un punto central, perfectos para gráficos circulares y ruedas de color).
¿Cómo puedo añadir más colores a mi degradado?
Haz clic en el botón "+" en la sección Puntos de color para añadir un nuevo color. Puedes añadir tantos colores como quieras. Cada punto de color tiene un control deslizante (0-100%) para ajustar su posición en el degradado. Para eliminar un color, haz clic en el icono de la papelera (se requieren al menos 2 colores).
¿Cuál es la diferencia entre los distintos tipos de degradado?
Los degradados lineales hacen que los colores cambien de forma lineal con un ángulo específico. Los degradados radiales se extienden desde un punto central hacia afuera, describiendo un círculo o una elipse. Los degradados cónicos hacen girar los colores alrededor de un punto central, como en una rueda de colores, lo que resulta útil para gráficos circulares y diseños similares.
¿Cómo utilizo el código CSS generado?
Haz clic en el botón 'Copiar' para copiar el código CSS al portapapeles. Luego, pégalo en tu archivo CSS o atributo de estilo. El código incluye la propiedad background completa, por ejemplo: background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);
¿Puedo guardar mis degradados?
La herramienta no almacena degradados, pero puedes copiar el código CSS y guardarlo en los archivos de tu proyecto. También puedes marcar configuraciones de degradado específicas guardando el código CSS en un archivo de texto o en un sistema de diseño.
¿Cuáles son los degradados preestablecidos?
Ofrecemos 8 preajustes de degradado diseñados profesionalmente: Atardecer (de rojo cálido a amarillo), Océano (de azul oscuro a cian), Bosque (de verde azulado a verde), Sueño Púrpura (de púrpura a rosa), Fuego (de amarillo radial a rojo), Azules Fríos (degradado azul), Arcoíris (espectro completo cónico) y Melocotón (tonos melocotón suaves). Haz clic en cualquier preajuste para aplicarlo al instante.
¿Cómo funciona el generador de gradiente aleatorio?
Haz clic en el botón "Degradado aleatorio" para generar un degradado completamente aleatorio con 2 a 4 puntos de color, colores aleatorios y un tipo de degradado aleatorio. Es perfecto para encontrar inspiración o descubrir combinaciones de colores inesperadas.
¿Puedo ajustar la posición de cada color?
¡Sí! Cada punto de color tiene un control deslizante que ajusta su posición en el degradado (0-100%). Arrastra el control deslizante o introduce un valor específico para perfeccionar las transiciones de color. Los colores más cercanos entre sí crean transiciones más nítidas, mientras que los colores más alejados generan transiciones más suaves.