Generador de degradados CSS: diseña degradados y copia el CSS

¿Qué es un generador de degradados CSS?

Un generador de degradados CSS (CSS ग्रेडिएंट जनरेटर) te permite diseñar degradados de color de forma visual y obtener el código CSS correspondiente. Los degradados, mezclas suaves de un color a otro, están en todas partes en el diseño moderno: secciones principales, botones, tarjetas, fondos de apps y miniaturas de YouTube. Escribir linear-gradient() a mano y recargar la página para ver el resultado es lento; con un generador arrastras controles deslizantes, ves una vista previa en vivo y copias el código terminado.

Esta herramienta gratuita admite los tres tipos de degradado CSS (lineal, radial y cónico) con 2 a 8 paradas de color, ángulo, forma y centro ajustables, nueve ajustes preestablecidos, botones de aleatorio e invertir, salida CSS con color sólido de respaldo y una descarga PNG de 1920×1080 para cuando necesites el degradado como imagen. Todo se ejecuta en tu navegador.

Características principales

• Tres tipos de degradado: lineal, radial y cónico.
• Control de ángulo de 0° a 360° para degradados lineales y cónicos.
• Forma y centro para radial (círculo o elipse) y centro para cónico.
• Hasta 8 paradas de color, cada una con selector de color, campo HEX y control deslizante de posición.
• Nueve ajustes preestablecidos, entre ellos Ocean, Sunset, Mint y uno azafrán-blanco-verde llamado Saffron.
• Aleatorio e Invertir para explorar rápidamente.
• CSS con respaldo, listo para pegar.
• Exportación PNG de 1920×1080 para fondos de pantalla, miniaturas y diapositivas.

Cómo crear un degradado paso a paso

1. Elige el tipo: Lineal, Radial o Cónico.
2. Define la dirección: arrastra el control del ángulo, o elige la forma y el centro.
3. Edita las paradas de color: haz clic en un cuadro de color o escribe un código HEX y luego arrastra el control deslizante para fijar su posición.
4. Agrega o quita paradas con «Agregar parada» y el botón × (mínimo 2, máximo 8).
5. Prueba los ajustes preestablecidos, Aleatorio o Invertir para inspirarte.
6. Copiar CSS o Descargar PNG.

Sintaxis del degradado CSS explicada

En un degradado lineal, el ángulo sigue la convención de CSS: 0deg apunta hacia arriba, 90deg a la derecha, 180deg hacia abajo y 270deg a la izquierda, girando en sentido horario. Las palabras clave también funcionan: to right equivale a 90deg y to bottom right apunta a la esquina. En los degradados radiales, circle mantiene una forma redonda, mientras que ellipse (el valor predeterminado en CSS) se estira a las proporciones del elemento. Los degradados cónicos comienzan en el ángulo indicado después de from y giran en sentido horario alrededor del centro.

Cómo entender las paradas de color

Cada parada tiene un color y una posición de 0% a 100% a lo largo del degradado. El navegador mezcla suavemente entre paradas vecinas. Algunos patrones útiles:

• Mezcla uniforme: paradas en 0% y 100% para un simple fundido de dos colores.
• Sesgo: mueve la segunda parada a 30% para que domine el segundo color.
• Borde marcado: dos paradas en la misma posición crean una línea nítida, útil para rayas y fondos divididos.
• Bandera de tres colores: el ajuste Saffron usa #FF9933 0%, #FFFFFF 50%, #138808 100%.

Las paradas se ordenan por posición cuando se escribe el CSS, así que puedes agregarlas en cualquier orden. El botón Invertir refleja todas las posiciones (una parada en 20% pasa a 80%), volteando el degradado sin volver a escribir los colores.

Usos prácticos

• Secciones principales y páginas de destino: un degradado diagonal sutil da profundidad sin necesidad de una imagen.
• Botones: un degradado suave de dos tonos se ve moderno; oscurécelo un poco al pasar el cursor.
• Tarjetas y superposiciones: un degradado de transparente a oscuro sobre una foto hace legible el texto blanco.
• Texto con degradado: aplica el degradado como fondo y recórtalo con la forma del texto.
• Gráficos circulares y anillos de progreso: los degradados cónicos con bordes marcados los dibujan con CSS puro.
• Miniaturas y fondos de pantalla: descarga el PNG de 1920×1080 y agrega texto en cualquier editor.

Fragmentos listos para usar

Texto con degradado: background: linear-gradient(90deg, #1B98E0, #7B2FF7); -webkit-background-clip: text; background-clip: text; color: transparent;

Superposición sobre foto: background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%), url(photo.jpg) center / cover;: el degradado va primero para que quede encima de la imagen.

Gráfico circular simple: background: conic-gradient(#1B98E0 0% 40%, #FF9933 40% 75%, #138808 75% 100%); border-radius: 50%;: porciones de 40%, 35% y 25%.

Ejemplo práctico: un fondo para miniatura

Supón que necesitas un fondo llamativo para una miniatura de YouTube sobre tecnología. Elige Lineal, haz clic en el ajuste Ocean (#1B98E0 a #7B2FF7) y fija el ángulo en 135° para que el color vaya de la esquina superior izquierda a la inferior derecha. El cuadro de CSS ahora muestra background: linear-gradient(135deg, #1B98E0 0%, #7B2FF7 100%);. ¿Prefieres un foco suave detrás del presentador? Cambia a Radial, elige Círculo y céntralo a la Derecha, y luego agrega una tercera parada de #FFFFFF en 0% para que el brillo empiece intenso. Cuando te guste el resultado, haz clic en Descargar PNG para obtener una imagen de 1920×1080, que conserva la proporción 16:9 de una miniatura; ábrela en tu editor y agrega texto y una foto encima. Como la imagen se genera con matemática del color y no con una foto, se mantiene nítida incluso al comprimirla.

¿Qué tipo de degradado debes elegir?

Lineal es la opción segura para fondos, botones y encabezados: es fácil de leer y funciona a cualquier tamaño. Radial crea foco: un centro más claro atrae la mirada hacia lo que está encima, lo que sirve para tarjetas de perfil, focos de luz y efectos de viñeta. Cónico es el especialista: perfecto para ruedas de color, gráficos circulares, indicadores de carga y patrones de estallido, pero puede verse recargado como fondo de página completa. Si tienes dudas, empieza con lineal a 135° y luego experimenta.

Sobre la exportación PNG

El PNG se dibuja con las funciones de degradado del canvas del navegador a 1920×1080 píxeles. En los degradados lineales, la herramienta reproduce la convención de ángulos de CSS y la longitud de la línea del degradado, de modo que la imagen coincide con lo que ves en la vista previa. En los degradados radiales, el PNG usa un círculo que llega a la esquina más lejana, el tamaño predeterminado de CSS; si elegiste una elipse, el PNG igualmente se dibuja como círculo, por lo que la forma puede diferir un poco. La exportación cónica requiere un navegador con compatibilidad de canvas cónico; las versiones actuales de Chrome, Edge, Firefox y Safari la tienen.

Consejos de diseño y accesibilidad

• Revisa el contraste en ambos extremos. El texto debe ser legible sobre las partes más claras y más oscuras del degradado. Nuestro Generador de paletas de colores muestra las relaciones de contraste.
• Mantenlo sutil en áreas grandes. Los tonos vecinos (azul a morado) se ven más calmados que los opuestos (rojo a verde), que pueden producir un centro turbio.
• Evita los centros grises. Si una mezcla de dos colores se ve apagada en el centro, agrega una parada intermedia más brillante.
• Usa los colores de tu marca. Los degradados entre dos tonos del color de tu marca mantienen la coherencia del diseño.
• Respeta el modo oscuro. Los degradados brillantes pueden deslumbrar en temas oscuros; considera una variante más profunda.

¿Quién usa un generador de degradados?

• Desarrolladores front-end que dan estilo a sitios web y apps.
• Diseñadores UI/UX que hacen prototipos de fondos y botones.
• YouTubers y creadores de Instagram que hacen miniaturas y fondos para historias.
• Bloggers que agregan encabezados coloridos sin imágenes pesadas.
• Estudiantes que aprenden CSS.
• Presentadores que quieren fondos de diapositivas limpios.

Errores comunes que debes evitar

• Usar background-color: los degradados son imágenes, así que usa background o background-image.
• Demasiados colores: más de tres o cuatro paradas pueden verse recargadas.
• Olvidar la altura del elemento: un degradado en un elemento vacío sin altura es invisible.
• Repetición en páginas largas: en el body, agrega min-height: 100vh o background-attachment: fixed para que el degradado cubra toda la pantalla en lugar de repetirse en franjas cuando el contenido es corto.

Solución de problemas

• Se ignora el campo HEX: escribe un código completo de seis dígitos con # (por ejemplo #1B98E0).
• No puedo quitar una parada: un degradado necesita al menos dos paradas.
• Bandas en degradados grandes: pueden aparecer rayas sutiles con colores muy parecidos en algunas pantallas; amplía un poco la diferencia de color.

Glosario rápido

• Degradado: una transición suave entre colores.
• Parada de color: un color y su posición en un degradado.
• Lineal: se mezcla a lo largo de una línea recta.
• Radial: se mezcla hacia afuera desde un centro.
• Cónico: se mezcla alrededor de un punto central.
• Respaldo: un color sólido que se usa si el degradado no se aplica.

¿Por qué usar este generador de degradados CSS?

Cubre todos los tipos de degradado CSS con controles precisos, vista previa en vivo, código limpio y exportación de imagen: gratis, rápido y privado.

Generador de degradados CSS: datos clave

Preguntas frecuentes

Explora más herramientas de Prompt Minds

Generador de degradados CSS funciona muy bien junto con nuestras otras herramientas gratuitas. Todas las herramientas de Prompt Minds se ejecutan por completo en tu navegador: sin registro, sin subir archivos, sin marcas de agua. Ver todas las herramientas gratuitas.