¿Por qué usar degradados en SVG?

Los degradados transforman tus gráficos SVG, añadiendo profundidad y dinamismo con transiciones suaves entre colores. En nuestros tutoriales anteriores, aprendiste a crear figuras primitivas como círculos y rectángulos, polilíneas, y a trabajar con vectores en <path>. También exploramos cómo insertar imágenes, videos, mover elementos SVG, darles color con fill y stroke, e incluir CSS/JavaScript embebidos (Conoce mas de los gráficos SVG). Ahora, es momento de dominar los degradados, una técnica esencial para diseños modernos.

Un degradado SVG se define en la etiqueta <defs> y se aplica a elementos como círculos, rectángulos o caminos mediante un identificador único en fill="url(#grad)". Puedes usar software como Adobe Illustrator o Inkscape para crear degradados, pero requieren experiencia. En esta guía, aprenderás métodos más accesibles: desde crear degradados con código hasta usar herramientas visuales como creadorlogos.com. ¡Sigue leyendo!

Tipos de degradados en SVG

Antes de sumergirnos en el código, exploremos los tipos de degradados más usados en SVG y diseño. Algunos son nativos en SVG, mientras que otros (como el cónico) requieren alternativas con CSS o simulaciones.

• Degradado Lineal (<linearGradient>): Transición de color a lo largo de una línea recta.
• Degradado Radial (<radialGradient>): Transición desde el centro hacia el exterior, como un círculo.
• Degradado Cónico (conic-gradient): Transición circular, como una rueda (no nativo en SVG, pero se puede simular).
• Degradado Multicolor: Usa múltiples puntos de color en un degradado lineal o radial.
• Degradado con Transparencias: Aplica transparencias a los colores para efectos de desvanecimiento.

A continuación, veremos cómo implementar cada uno con código y ejemplos visuales.

Crear degradados con <linearGradient> y <radialGradient>

La forma más directa de aplicar degradados en SVG es definiendo un <linearGradient> o <radialGradient> dentro de una etiqueta <defs>. Luego, lo aplicas a un elemento con fill="url(#id)". Aquí te muestro cómo hacerlo para cada tipo.

Degradado Lineal (<linearGradient>)

Un degradado lineal transita colores a lo largo de una línea recta. Define los puntos iniciales y finales con x1, y1, x2, y2, y usa <stop> para los colores. Vamos a desglosar este código paso a paso para que sea fácil de entender, incluso si no tienes experiencia con programación ni SVG.

<svg viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="180" height="180" fill="url(#grad1)" />
</svg>
                

Explicación de cada codigo degradados:

• <svg>: Esto es como el lienzo donde dibujamos nuestro diseño. Define el área donde aparecerá todo, como un papel grande. Aquí decimos que el dibujo tiene 200x200 píxeles y usamos viewBox="0 0 200 200" para que se ajuste bien al tamaño. (Esta etiqueta la estudiaremos en otro tutorial por ser muy interesante).
• <defs>: Es un contenedor de definiciones. Aquí se colocan elementos que no se dibujan directamente pero que pueden ser reutilizados, como degradados, filtros o patrones. Piensa en ello como una caja donde guardamos las "recetas" de color antes de usarlas.
• <linearGradient>: Define un degradado lineal, que es una transición de color que va en línea recta. Es como pintar una rampa de colores que va de un lado a otro.
• id="grad1": Es un identificador único, como un nombre especial para este degradado. Lo usamos más tarde para decirle al rectángulo que use este degradado específico.
• x1="0%" y1="0%": Punto de inicio del degradado. Imagina que es el lugar donde empieza el color, en este caso la esquina superior izquierda (0% desde la izquierda y 0% desde arriba).
• x2="100%" y2="0%": Punto final del degradado. Aquí termina el color, en la esquina superior derecha (100% desde la izquierda, pero sigue en 0% desde arriba, así que va horizontalmente).
• <stop>: Define los puntos de cambio de color en el degradado. Es como poner marcadores en la rampa para decir dónde cambia el color.
• offset="0%": Este color aparece al inicio del degradado. El 0% significa el principio de la línea que va de x1, y1 a x2, y2.
• stop-color="red": Comienza en rojo. Este es el color que verás al principio del degradado.
• offset="100%": Este color aparece al final del degradado. El 100% significa el final de la línea.
• stop-color="blue": Termina en azul. Este es el color que verás al final del degradado, creando una transición suave de rojo a azul.
• <rect>: Dibuja un rectángulo en el lienzo. Aquí le decimos que empiece en las coordenadas (10, 10), tenga un ancho y alto de 180, y use el degradado que guardamos con fill="url(#grad1)".
• fill="url(#grad1)": Le dice al rectángulo que use el degradado llamado "grad1" que definimos antes. Es como decirle: "pinta este rectángulo con la receta de colores que creamos".

Variaciones del degradado lineal

Cambiando los valores de x1, y1, x2, y2, puedes hacer que el degradado sea horizontal, vertical o diagonal:

• Horizontal (como en el código): Usa x1="0%" y1="0%" x2="100%" y2="0%" para ir de izquierda a derecha.
• Vertical: Cambia a x1="0%" y1="0%" x2="0%" y2="100%" para ir de arriba hacia abajo.
• Diagonal: Usa x1="0%" y1="0%" x2="100%" y2="100%" para ir de la esquina superior izquierda a la inferior derecha.

Ejemplos visuales

Degradado Radial (<radialGradient>)

Un degradado radial transita colores desde un centro hacia afuera. Usa cx, cy, r para definir el centro y radio del degradado.

<svg viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="white" />
      <stop offset="100%" stop-color="black" />
    </radialGradient>
  </defs>
  <circle cx="100" cy="100" r="90" fill="url(#grad2)" />
</svg>
                

• <radialGradient>: Crea un degradado que sale desde el centro hacia afuera, como si los colores se expandieran en círculos.
• cx="50%" cy="50%": El centro del degradado, justo en el medio del lienzo (50% de izquierda a derecha y 50% de arriba a abajo).
• r="50%": El radio del degradado, que determina hasta dónde llegan los colores desde el centro (50% del ancho total).

Ejemplo visual

Variaciones del degradado radial

Cambiando los valores de cx, cy, r, puedes ajustar la posición del centro y el alcance del degradado radial:

• Centro desplazado a la esquina superior izquierda: Usa cx="25%" cy="25%" r="50%" para mover el centro del degradado hacia la esquina superior izquierda, manteniendo el mismo radio.
• Radio pequeño: Usa cx="50%" cy="50%" r="25%" para reducir el radio, haciendo que el degradado se concentre más cerca del centro.
• Radio grande: Usa cx="50%" cy="50%" r="75%" para aumentar el radio, extendiendo el degradado más hacia los bordes.

Ejemplos visuales

Degradado Multicolor

Puedes añadir múltiples <stop> para crear degradados con más de dos colores.

<svg viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad3">
      <stop offset="0%" stop-color="red" />
      <stop offset="33%" stop-color="yellow" />
      <stop offset="66%" stop-color="green" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="180" height="180" fill="url(#grad3)" />
</svg>
                

Explicación de cada parte para principiantes

• <linearGradient>: Crea una transición de colores en línea recta.
• offset="0%" stop-color="red": Comienza con rojo al inicio (0%).
• offset="33%" stop-color="yellow": Cambia a amarillo en un tercio del camino (33%).
• offset="66%" stop-color="green": Cambia a verde en dos tercios del camino (66%).
• offset="100%" stop-color="blue": Termina en azul al final (100%).

Ejemplo visual

Degradado con Transparencias

Usa stop-opacity para añadir transparencias a los colores, creando efectos de desvanecimiento.

<svg viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="200" height="200" fill="white" />
  <defs>
    <radialGradient id="grad4">
      <stop offset="0%" stop-color="purple" stop-opacity="1" />
      <stop offset="100%" stop-color="purple" stop-opacity="0" />
    </radialGradient>
  </defs>
  <circle cx="100" cy="100" r="90" fill="url(#grad4)" />
</svg>
                

Explicación de cada parte para principiantes

• <rect>: Un rectángulo que cubre todo el lienzo, pintado de blanco como fondo.
• offset="0%" stop-color="purple" stop-opacity="1": En el centro (0%), el color púrpura es totalmente visible (opacidad 1).
• offset="100%" stop-color="purple" stop-opacity="0": En los bordes (100%), el púrpura se vuelve invisible (opacidad 0), como si desapareciera.
• <circle>: Dibuja un círculo con centro en (100, 100) y radio de 90 píxeles.

Ejemplo visual

Simular degradados cónicos en SVG

SVG no soporta degradados cónicos de forma nativa, pero puedes usar CSS con conic-gradient dentro de un <foreignObject> para lograr este efecto igual que vimos en otras secciones para añadir elemetos externos al svg.

<svg viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <foreignObject x="10" y="10" width="180" height="180">
    <div style="width: 180px; height: 180px; background: conic-gradient(red, yellow, green, blue, red); border-radius: 50%;" xmlns="http://www.w3.org/1999/xhtml"></div>
  </foreignObject>
</svg>
                

Explicación de degradados cónicos

• <foreignObject>: Permite insertar contenido de otro tipo (como HTML) dentro del SVG. Es como agregar una ventana especial dentro de nuestro dibujo.
• <div>: Una caja dentro de esa ventana que tiene un tamaño de 180x180 píxeles.
• style="width: 180px; height: 180px; background: conic-gradient(...); border-radius: 50%;": Da estilo a la caja: la hace redonda con border-radius: 50% y le aplica un degradado cónico que va de rojo a amarillo, verde, azul y vuelve a rojo.
• xmlns="http://www.w3.org/1999/xhtml": Indica que el contenido dentro de <foreignObject> usa el lenguaje HTML.

Ejemplo visual

Alternativamente, puedes simular un degradado cónico en SVG puro creando múltiples segmentos con <path>, pero esto requiere más código y es menos práctico.

Ejemplos visuales espectaculares

A continuación, te muestro tres ejemplos más avanzados y visualmente impactantes de degradados cónicos, ajustando los colores, puntos de transición y efectos adicionales con CSS:

Modificar degradados con JavaScript

JavaScript te permite modificar degradados dinámicamente, como cambiar los colores de los <stop> en respuesta a eventos.

<svg viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad5">
      <stop id="stop1" offset="0%" stop-color="pink" />
      <stop id="stop2" offset="100%" stop-color="cyan" />
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="180" height="180" fill="url(#grad5)" />
  <script>
    const stop1 = document.getElementById("stop1");
    const stop2 = document.getElementById("stop2");
    setInterval(() => {
      stop1.setAttribute("stop-color", stop1.getAttribute("stop-color") === "pink" ? "purple" : "pink");
      stop2.setAttribute("stop-color", stop2.getAttribute("stop-color") === "cyan" ? "yellow" : "cyan");
    }, 2000);
  </script>
</svg>
                

Explicación de cada parte para principiantes

• <script>: Una sección donde ponemos instrucciones en JavaScript, un lenguaje que hace que las cosas cambien en la página.
• const stop1 = document.getElementById("stop1");: Busca el primer marcador de color por su nombre ("stop1").
• setInterval(() => {...}, 2000);: Hace que las instrucciones dentro se repitan cada 2000 milisegundos (2 segundos).
• setAttribute("stop-color", ...): Cambia el color del marcador. Si es rosa, lo cambia a púrpura, y si es púrpura, vuelve a rosa, y lo mismo con cian y amarillo.

Ejemplo visual

Colorear con degradados en creadorlogos.com

Si prefieres evitar el código, creadorlogos.com te permite crear y aplicar degradados de forma visual y sencilla.

1. Accede al creador de logos: Si ya estás dentro de nuestro creador de logos online (haz clic aquí), inserta todos los elementos en el escenario, como texto, figuras primitivas o cualquier figura vectorial de las miles disponibles dentro de las 20 clasificaciones por temas.
2. Identifica elementos editables: Al pasar el ratón por encima de las figuras, estas se iluminarán (contorneándose) para indicar las figuras a las que puedes aplicar degradados.
3. Configura el degradado: Ve a la sección de degradados a través del botón "Degradados". Se abrirá un menú con opciones para crear degradados personalizados. Podrás elegir degradados radiales o lineales, ajustar múltiples parámetros de configuración y confirmar la creación con el botón "CREA DEGRADO".
4. Aplica el degradado: Una vez tengas los degradados listos para tu diseño, enlázalos a un elemento como si fuera un color de tu paleta: selecciona el degradado con un clic y haz clic donde quieras aplicarlo a tus objetos.
5. Refresca si es necesario: Dentro del escenario, refresca la página con F5 o actualízala si el degradado no se renderiza correctamente, ya que la respuesta puede variar según el navegador.
6. Guarda tu diseño: Finalmente, guarda el diseño como imagen SVG o como vectores en formato SVG. También puedes ver el código generado online a través del botón "Generar código".

Paso 1: Selecciona tu objeto

Haz clic en el elemento SVG que deseas colorear o selecciónalo desde el panel lateral derecho, donde se listan todos los objetos de tu diseño.

Paso 2: Aplica un degradado

Usa la paleta de colores para elegir un degradado lineal o radial, ajusta los colores y la dirección del degradado con controles intuitivos.

✅ Ventajas:

• No requiere conocimientos de programación.
• Interfaz visual intuitiva y rápida.
• Exportación en múltiples formatos.

❌ Desventajas:

• Menos control que editando código directamente.
• Dependes de la plataforma para ajustes avanzados.

En próximos artículos, te explicaremos cómo generar animaciones svg sin javascript para el cambio de colores y degradados, como en el ejemplo siguiente. ¡Te animamos a seguir leyendo mi blog para descubrir más trucos y técnicas que elevarán tus diseños a otro nivel!