Generador de degradados CSS

Cómo funciona

Escriba sus colores en el panel izquierdo: un color por línea, y el orden de las líneas es el orden del degradado. Se reconocen las escrituras HEX, RGB y HSL. Para fijar un color en un punto concreto, añada un porcentaje al final de su línea: "#2F6FED 30" ancla ese color en la marca del 30 %, y los colores sin posición se reparten por igual en el resto del recorrido. Después elija el tipo — en el degradado lineal el control de ángulo fija la dirección (90 grados va de izquierda a derecha, 180 de arriba abajo), en el cónico es el ángulo inicial, y el radial se abre siempre del centro hacia afuera. La vista previa sigue cada pulsación. En el CSS generado, el primer color aparece además como background-color simple: incluso un cliente que no dibuje degradados nunca muestra una superficie vacía. Copie el código o guarde el mismo degradado como PNG de 1920×1080 píxeles con el botón Descargar.

Esta herramienta también se busca como generador de degradados css, degradado css, linear gradient css, fondo degradado css, conic gradient css, degradado en png.

¿Qué es linear-gradient?

linear-gradient es la función CSS que funde dos o más colores a lo largo de una línea recta. Su primer parámetro es el ángulo de dirección: 0 grados va de abajo arriba, 90 de izquierda a derecha, 180 de arriba abajo. Después vienen las paradas de color, cada una con un color y una posición opcional. El navegador calcula la mezcla de cada píxel entre dos paradas: la salida no es un archivo de imagen sino una instrucción de dibujo, nítida a cualquier resolución y cuyos colores se cambian editando una sola línea.

¿Qué es Parada de color (color stop)?

Una parada de color es el par que le dice al degradado dónde aparece un color con toda su intensidad: un valor de color más una posición en porcentaje. Escribir "#2F6FED 30%" significa que el color puro está exactamente en la marca del 30 %; cada píxel entre dos paradas es una mezcla de ambas. Si dos paradas reciben la misma posición, en lugar de fundido se obtiene un borde nítido — en esta herramienta, las paradas sin posición escrita se reparten por igual, y las que usted posiciona se quedan exactamente donde las puso.

¿Qué diferencia hay entre linear-gradient y radial-gradient?

Los dos mezclan los colores con las mismas reglas; lo que cambia es la geometría de la transición. linear-gradient vierte los colores a lo largo de una línea recta: usted elige el ángulo, y en cualquier corte perpendicular a esa línea el color es constante — es la herramienta de los fondos de borde a borde, las franjas y los rellenos de botones. radial-gradient se abre en anillos desde un centro: la primera parada queda en el centro, la última en el anillo exterior, y no existe noción de dirección — por eso el control de ángulo no le afecta. Focos, viñeteados y efectos de atención — todo lo que se lee de dentro hacia afuera — se construye con la forma radial.

Las trampas: línea de costura y bandas visibles

Un degradado cónico da una vuelta completa y regresa a su punto de partida. Si el último color no coincide con el primero, aparece una línea de costura nítida donde el círculo se cierra — es la naturaleza de la forma, no un fallo. Para un anillo continuo, repita el primer color en la última línea; la herramienta reparte las posiciones en consecuencia.

La segunda trampa son las bandas: cuando dos tonos muy parecidos se extienden por una superficie amplia, los 256 niveles por canal de la pantalla no bastan para sostener la transición y aparecen escalones visibles. Separar más los tonos, estrechar la zona de transición o añadir una parada intermedia rompe las bandas.

¿Qué tipo de degradado conviene en cada caso?

La elección del tipo es tanto una cuestión de función como de gusto; los tres tienen usos asentados.

• Lineal → fondos de botones y tarjetas, franjas de encabezado, fondos de página
• Radial → efecto foco, viñeteado, punto de atención
• Cónico → gráficos de pastel, círculos cromáticos, anillos de carga
• Salida PNG → donde el CSS no llega: fondo de diapositiva, plantilla de correo, fondo de pantalla

Preguntas frecuentes

¿Cómo controlo la posición de cada color en el degradado?

Añada un número de 0 a 100 al final de la línea: "#DB2777 75" ancla ese color en la marca del 75 %. El signo de porcentaje es opcional; los colores sin posición se reparten por igual en el resto del recorrido.

¿Qué guarda el botón Descargar?

El degradado de la vista previa como PNG de 1920×1080 píxeles. Para el código CSS use el botón de copiar; el código pasa al portapapeles tal cual se muestra.

¿Cuántos colores puedo usar?

Entre 2 y 12. Dos colores bastan para la mayoría de los casos; con más paradas, el orden se controla con las líneas y las posiciones con los porcentajes al final de cada línea.

¿El CSS generado funciona en navegadores antiguos?

linear-gradient y radial-gradient funcionan desde hace años en todos los navegadores actuales. conic-gradient es más reciente (versiones desde 2020 aproximadamente); en un cliente muy antiguo entra en juego la línea background-color incluida en el código.