Degradados CSS en Figma: lineal, radial, cónico y qué hacer cuando no hay equivalente

Figma tiene cuatro tipos de degradado y CSS tiene tres familias de degradados, así que la correspondencia no es uno a uno. El lineal y el radial se convierten sin problemas si tienes en cuenta las convenciones de ángulo. El degradado angular de Figma es la misma idea que conic-gradient() en CSS. El degradado diamante de Figma no tiene ninguna función CSS, así que necesita una alternativa elegida a propósito.

Esta referencia es para diseñadores que entregan rellenos y para desarrolladores que los reconstruyen. Cubre el mapa de tipos, las reglas de ángulo y forma que suelen causar errores, la sintaxis cónica, qué hacer con el diamante y el panorama de compatibilidad de navegadores en 2026.

Los cuatro tipos de degradado de Figma

La página de ayuda de Figma enumera cuatro tipos de degradado que puedes aplicar a un relleno o a un trazo:

• Lineal: una transición progresiva entre dos colores en línea recta.
• Radial: un degradado circular con un color en el centro que pasa a otro color en el borde.
• Angular: un degradado que avanza en sentido horario desde la posición inicial.
• Diamante: un degradado con cuatro puntos que parte del centro del objeto, con ancho y alto ajustables por separado.

Todo degradado empieza con dos paradas de color. Las arrastras para moverlas, añades más haciendo clic en el control deslizante de color o en el icono más, y las quitas con Delete o con el botón menos. "Flip gradient" invierte el orden de las paradas y "Rotate gradient" cambia la orientación. Las paradas también pueden usar variables, y un degradado se puede guardar como estilo.

El mapa en una tabla

CSS también tiene formas repetitivas de cada familia: repeating-linear-gradient(), repeating-radial-gradient() y repeating-conic-gradient(). Figma no tiene un tipo repetitivo aparte, así que son una herramienta de patrones del lado de CSS y no algo que se traduzca desde un diseño.

Lineal y radial: las convenciones que difieren

linear-gradient y el ángulo

En CSS, el ángulo de linear-gradient() se mide en sentido horario, con 0deg apuntando de abajo hacia arriba y 90deg de izquierda a derecha, según la guía de MDN sobre degradados CSS. Sin ángulo, el degradado va de arriba abajo. También puedes usar palabras clave como to right o to bottom right.

.hero {
  background-image: linear-gradient(70deg, blue, pink);
}

Aquí es donde falla la entrega. Un degradado de Figma se define con manejadores sobre la capa, no con un único número CSS, así que el ángulo que lees en el lienzo hay que convertirlo. Un hilo de la comunidad de Figma sobre cómo exportar degradados cuenta que, al convertir mediante la API, "the angle gets messed up sometimes". Es un solo testimonio anecdótico, no una regla. Aun así, es buena razón para comprobar el ángulo a ojo contra la página renderizada antes de fiarte de un número convertido.

Forma, tamaño y posición en radial-gradient

radial-gradient() recibe una forma, un tamaño y una posición: radial-gradient(shape size at position, stops). La forma es circle o ellipse, y por defecto es ellipse. Las palabras clave de tamaño son closest-side, closest-corner, farthest-side y farthest-corner, con farthest-corner por defecto. La posición va después de at, como en at 25% 75%.

.glow {
  background-image: radial-gradient(circle closest-side at 25% 75%, red, yellow 10%, dodgerblue 50%, beige);
}

Si un relleno radial de Figma parece un círculo en una capa cuadrada pero se estira en una capa ancha, el CSS necesita un circle explícito, porque el ellipse por defecto sigue la caja. Las posiciones de las paradas pueden ser porcentajes o longitudes. Las paradas sin posición se reparten de forma uniforme, con la primera al 0% y la última al 100%.

Paradas, paradas duras y pistas

Dos paradas en la misma posición crean un borde duro. linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%) da un corte nítido. Una pista de color, una posición suelta entre dos colores como lime, 20%, cyan, mueve el punto medio de la transición. Figma lo consigue colocando paradas. Un borde duro son simplemente dos paradas arrastradas al mismo sitio.

Angular es cónico

El degradado angular de Figma y conic-gradient() de CSS comparten el mismo modelo: los colores barren en sentido horario alrededor de un punto central. La referencia de MDN sobre conic-gradient() da la sintaxis:

.wheel {
  background-image: conic-gradient(from 45deg at 50% 50%, blue, red);
}

from <angle> fija dónde empieza el barrido. Acepta deg, grad, rad y turn, y el valor por defecto es 0deg, la posición de las 12 en punto. at <position> fija el centro, usa la sintaxis de background-position y por defecto es center. También puedes elegir un espacio de interpolación, por ejemplo in oklch.

Las paradas son ángulos, no porcentajes de una línea

Las paradas cónicas se posicionan por ángulo. Si omites las posiciones, se reparten de forma uniforme, con la primera parada en 0deg y la última en 360deg. Figma coloca las paradas angulares a lo largo de su propio control de color, así que tienes que convertir cada posición en grados o vueltas. Una parada al 25% del control pasa a ser 90deg o 0.25turn.

Paradas duras y el patrón de tarta

Los ángulos iguales dan bordes duros, que es como se dibuja una porción de tarta:

.pie {
  background-image: conic-gradient(red 36deg, orange 36deg 170deg, yellow 170deg);
  border-radius: 50%;
}

Una advertencia de MDN también vale para la entrega de diseño. Los degradados son imágenes y los lectores de pantalla no las exponen. No uses un degradado cónico para transmitir datos que alguien necesite leer. Para un gráfico real, usa SVG o marcado semántico.

No he verificado el CSS exacto que genera ninguna herramienta concreta para un relleno angular. Trata la correspondencia anterior como la regla conceptual y comprueba el resultado generado contra el render.

Diamante: sin función CSS, ¿qué alternativa queda?

CSS define degradados lineales, radiales y cónicos y sus formas repetitivas. No existe una función diamante. Por tanto, un relleno diamante de Figma no se puede escribir como un único valor de background-image.

Tienes tres opciones honestas:

1. Aproximarlo con degradados en capas. Apila capas de linear-gradient() con paradas transparentes. Funciona para formas simples y se vuelve frágil enseguida.
2. Conservarlo como imagen o SVG. Si el diamante es un relleno decorativo de dimensiones fijas, un recurso exportado es el resultado más predecible.
3. Rediseñarlo como radial. Si importa más el aspecto que la forma exacta, un radial-gradient() es el degradado nativo más cercano.

Son orientaciones, no resultados medidos. No afirmo cómo exporta una herramienta concreta un relleno diamante, porque no lo verifiqué. Decide a propósito en lugar de descubrir la alternativa en una revisión.

Compatibilidad de navegadores y la alternativa que escribes

Según MDN, conic-gradient() tiene disponibilidad amplia en Baseline desde noviembre de 2020. Can I use indica un 97.21% de compatibilidad global en 2026, con Chrome 69, Edge 79, Safari 12.1 y Firefox 83 como primeras versiones compatibles. Internet Explorer y Opera Mini no lo admiten.

Un degradado es una imagen, no un color, así que no funciona en background-color. Por eso la alternativa de color debe ser una declaración aparte, escrita antes del degradado:

.badge {
  background-color: #3b5bdb;
  background-image: conic-gradient(from 0deg, #3b5bdb, #e8590c, #3b5bdb);
}

Los navegadores que no pueden interpretar el degradado descartan esa declaración y se quedan con el color sólido. Los degradados tampoco tienen tamaño intrínseco, así que se estiran para llenar la caja en la que se pintan.

Puntos a vigilar cuando un degradado cruza la frontera

Cuando llevas una página ya construida a Figma, o envías un relleno de Figma a código, revisa siempre la misma lista corta:

• El ángulo, frente a la convención de CSS donde 0deg apunta hacia arriba.
• Las posiciones de las paradas, en la unidad que espera el destino: porcentajes en lineal, ángulos en cónico.
• La posición del centro y, en radial, la forma y las palabras clave de tamaño.
• Las paradas enlazadas a variables de Figma, que en CSS son valores ya resueltos.

Si vas a importar páginas existentes, UnHTML es una forma de llevar las capas a Figma, y la misma lista se aplica a su resultado: abre los rellenos degradados y compáralos con la página.

Resumen

El lineal y el radial se convierten una vez que manejas las reglas de ángulo y forma. El angular es cónico, con paradas en grados. El diamante no tiene función CSS, así que elige a propósito entre una aproximación, un recurso exportado o un rediseño radial. Escribe un background-color sólido antes de cualquier degradado que publiques.

Preguntas frecuentes

¿Tiene Figma un degradado cónico?

Figma lo llama degradado angular. Avanza en sentido horario desde la posición inicial, que es el mismo modelo de barrido que conic-gradient() en CSS. En CSS el barrido empieza a las 12 en punto y gira en sentido horario.

¿Existe un equivalente CSS del degradado diamante de Figma?

Ninguna función de degradado CSS dibuja un diamante. CSS tiene degradados lineales, radiales y cónicos, además de variantes repetitivas. Un diamante hay que aproximarlo, por ejemplo con degradados en capas, o conservarlo como imagen.

¿Hacia dónde apunta 0deg en un linear-gradient de CSS?

0deg apunta de abajo hacia arriba y 90deg de izquierda a derecha, aumentando en sentido horario. Sin ángulo, el valor por defecto va de arriba abajo. Por eso un ángulo leído en un manejador de Figma rara vez coincide directamente con el número de CSS.

¿Puedo usar conic-gradient en producción?

En 2026, Can I use indica un 97.21% de compatibilidad global, con Chrome 69, Edge 79, Safari 12.1 y Firefox 83 como primeras versiones. Internet Explorer y Opera Mini no lo admiten, así que añade un background-color sólido antes.