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.
Herramientas similares
135 grados significa esquina superior-izquierda hacia inferior-derecha
La convención de ángulos despista una vez: en CSS, 0deg apunta hacia arriba y los grados giran en sentido horario, así que el 135deg caballo de batalla fluye de la esquina superior-izquierda a la inferior-derecha — por eso casi todo fondo héroe diagonal usa ese valor. Cada parada de color lleva una posición de 0-100 %: acercar las dos paradas de un degradado azul-violeta (digamos 20 % y 80 %) crea una banda suave, mientras que una parada al 0 % hace que el color arranque duro en el borde. El botón Aleatorio salta entre paletas completas cuando se busca un punto de partida que refinar en lugar de una página en blanco.
Banding, paradas duras y gemelos de modo oscuro
Tres problemas de calidad separan un degradado aficionado de uno de producción. Los degradados sutiles en superficies grandes pueden hacer banding — líneas de contorno visibles — sobre todo en pantallas de poca profundidad de bits; ensanchar la distancia entre paradas o separar ligeramente los dos tonos suele ocultarlo. Colocar dos colores distintos en la misma posición crea una parada dura — así se hacen rayas, no fundidos. Y un degradado afinado para una página clara suele verse turbio en una oscura: el modo oscuro necesita su propia pareja, típicamente con tonos medios más luminosos, guardada como variante aparte.
Acerca de Generador de gradientes
Los degradados se han vuelto el fondo por defecto del web moderno — banners héroe, botones de llamada a la acción, pantallas de carga, cabeceras de tarjetas — y cada uno es una línea de CSS que especifica colores, sus posiciones de parada y una dirección. Escribir esa línea a mano es posible; iterarla a ojo es más rápido. El generador existe para la iteración: arrastra paradas, alterna lineal y radial, y lee el CSS terminado directamente de la herramienta.
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.