gradientDesde: 0.9.0

Un degradado de color.

Typst admite degradados lineales mediante la función gradient.linear, degradados radiales mediante la función gradient.radial y degradados cónicos mediante la función gradient.conic.

Un degradado se puede usar con los siguientes fines:

Como relleno para pintar el interior de una forma: rect(fill: gradient.linear(..))
Como trazo para pintar el contorno de una forma: rect(stroke: 1pt + gradient.linear(..))
Como relleno de texto: set text(fill: gradient.linear(..))
Como mapa de color del que podés muestrear: gradient.linear(..).sample(50%)

Ejemplos


#stack(
  dir: ltr,
  spacing: 1fr,
  square(fill: gradient.linear(..color.map.rainbow)),
  square(fill: gradient.radial(..color.map.rainbow)),
  square(fill: gradient.conic(..color.map.rainbow)),
)

Los degradados también se admiten en texto, pero solo cuando se establece la relatividad en auto (el valor por defecto) o en "parent". Para crear degradados palabra por palabra o glifo por glifo, podés envolver manualmente las palabras o los caracteres de tu texto en boxes o mediante una regla show.


#set text(fill: gradient.linear(red, blue))
#let rainbow(content) = {
  set text(fill: gradient.linear(..color.map.rainbow))
  box(content)
}

This is a gradient on text, but with a #rainbow[twist]!

Paradas

Un degradado se compone de una serie de paradas (stops). Cada una de estas paradas tiene un color y un desplazamiento. El desplazamiento es una proporción entre 0% y 100% o un ángulo entre 0deg y 360deg. El desplazamiento es una posición relativa que determina qué tan lejos a lo largo del degradado está ubicada la parada. El color de la parada define el color que debe tener el degradado en esa posición.

Cada parada se pasa como argumento posicional y puede tener una de dos formas:

Solo un color, como red, para que Typst ubique la parada automáticamente.
Un array con un color y su desplazamiento, como (red, 30%), para ubicar la parada vos mismo.

Podés elegir omitir los desplazamientos al definir un degradado. En ese caso, Typst espaciará todas las paradas de manera uniforme. De lo contrario, se deben proporcionar desplazamientos para todas las paradas. No deben disminuir de una parada a la siguiente, la primera debe ser 0% y la última, 100%.


#rect(
  width: 100%,
  fill: gradient.linear(
    (green, 0%),
    (red, 30%),
    (blue, 100%),
  ),
)

Darle el mismo desplazamiento a dos paradas crea un borde duro en lugar de una transición suave:


#rect(
  width: 100%,
  fill: gradient.linear(
    (orange, 0%),
    (orange, 50%),
    (blue, 50%),
    (blue, 100%),
  ),
)

Typst ofrece el método sharp en los degradados para convertir automáticamente un degradado suave en uno con bordes duros. El ejemplo anterior se puede escribir de manera equivalente así:


#rect(
  width: 100%,
  fill: gradient.linear(orange, blue)
    .sharp(2),
)

Typst predefine mapas de color que podés usar como paradas en color.map.

Relatividad

La ubicación de las paradas 0% y 100% depende de las dimensiones de un contenedor. Este contenedor puede ser la forma sobre la que se está pintando o el contenedor circundante más cercano. Esto se controla con el argumento relative de un constructor de degradado. Por defecto, los degradados son relativos a la forma sobre la que se pintan, salvo que el degradado se aplique sobre texto, en cuyo caso son relativos al contenedor ancestro más cercano.

Typst determina el contenedor ancestro de la siguiente manera:

Para las formas que se ubican en la raíz / nivel superior del documento, el ancestro más cercano es la propia página.
Para las otras formas, el ancestro es el block o box más interno que contiene la forma.

Espacios de color e interpolación

Los degradados se pueden interpolar en cualquier espacio de color. Por defecto, los degradados se interpolan en el espacio de color Oklab, que es un espacio de color perceptualmente uniforme. Esto significa que el degradado se percibirá con una progresión suave de colores. Esto es particularmente útil para la visualización de datos.

Sin embargo, podés elegir interpolar el degradado en cualquier espacio de color admitido que quieras, pero tené en cuenta que algunos espacios de color no son adecuados para interpolar perceptualmente entre colores. Consultá la tabla de abajo al elegir un espacio de interpolación.

Espacio de color	¿Perceptualmente uniforme?
Oklab	Sí
Oklch	Sí
sRGB	No
RGB lineal	Sí
CMYK	No
Escala de grises	Sí
HSL	No
HSV	No

Dirección

Algunos degradados son sensibles a la dirección. Por ejemplo, un degradado lineal tiene un ángulo que determina su dirección. Typst usa un ángulo en sentido horario, con 0° de izquierda a derecha, 90° de arriba hacia abajo, 180° de derecha a izquierda y 270° de abajo hacia arriba.


#stack(
  dir: ltr,
  spacing: 1fr,
  square(fill: gradient.linear(red, blue, angle: 0deg)),
  square(fill: gradient.linear(red, blue, angle: 90deg)),
  square(fill: gradient.linear(red, blue, angle: 180deg)),
  square(fill: gradient.linear(red, blue, angle: 270deg)),
)

Nota sobre los tamaños de archivo

Los degradados pueden ser bastante grandes, especialmente si tienen muchas paradas. Esto se debe a que los degradados se almacenan como una lista de colores y desplazamientos, que puede ocupar mucho espacio. En la exportación a SVG, los degradados se almacenan como una lista de colores color.rgb que replican el espacio de color original con una cantidad optimizada de paradas adicionales en el medio. En la exportación a PDF, lo mismo se aplica a los degradados en los espacios de color color.oklab, color.oklch, color.hsv, color.hsl y color.linear-rgb. Esto evita tener que codificar estos espacios de color en tu archivo PDF, pero sí agrega paradas adicionales a tu degradado, lo que puede aumentar el tamaño del archivo.

Funciones

`linear`Desde: 0.9.0

Crea un degradado lineal nuevo, en el que los colores hacen la transición a lo largo de una línea recta.

Ver ejemplo


#rect(
  width: 100%,
  height: 20pt,
  fill: gradient.linear(
    ..color.map.viridis,
  ),
)

gradient.linear(

..color array,space: auto spotany,relative: auto str,direction,angle,

) → gradient

`stops`
color o array
ObligatorioPosicional
Variádico

Las paradas de color del degradado.

Cada parada se da como un argumento posicional separado. Puede ser un color, como red, o un array con un color y su desplazamiento, como (red, 30%). Si se dan desplazamientos, deben proporcionarse para todas las paradas, no deben disminuir de una parada a la siguiente, deben empezar en 0% y terminar en 100%.

Al usar un mapa de color predefinido del módulo color.map, se usa el operador de expansión .. para pasar cada parada como un argumento separado.

`space`
auto o spot o any
Por defecto: `auto`

El espacio de color en el que se interpola el degradado.

Por defecto es un espacio de color perceptualmente uniforme llamado Oklab.

`relative`
auto o str
Por defecto: `auto`

La ubicación relativa del degradado.

El padre de un elemento es el box o block más interno que contiene el elemento o, si no hay ninguno, la propia página.

Variante	Detalles
`"self"`	Relativo a sí mismo (su propio cuadro delimitador).
`"parent"`	Relativo a su elemento padre (el cuadro delimitador del padre).

`dir`
direction
Posicional
Por defecto: `ltr`

La dirección del degradado.

`angle`
angle
ObligatorioPosicional

El ángulo del degradado.

`radial`Desde: 0.9.0

Crea un degradado radial nuevo, en el que los colores irradian desde un origen.

El degradado se define con dos círculos: el círculo focal y el círculo final. El círculo focal es un círculo con centro focal-center y radio focal-radius, que define los puntos en los que el degradado empieza y tiene el color de la primera parada. El círculo final es un círculo con centro center y radio radius, que define los puntos en los que el degradado termina y tiene el color de la última parada. Luego el degradado se interpola entre estos dos círculos.

Con estos cuatro valores, también llamados punto focal para el círculo inicial y centro y radio para el círculo final, podemos definir un degradado con propiedades más interesantes que un degradado radial básico.

Ver ejemplo


#stack(
  dir: ltr,
  spacing: 1fr,
  circle(fill: gradient.radial(
    ..color.map.viridis,
  )),
  circle(fill: gradient.radial(
    ..color.map.viridis,
    focal-center: (10%, 40%),
    focal-radius: 5%,
  )),
)

gradient.radial(

..color array,space: auto spotany,relative: auto str,center: array,radius: ratio,focal-center: auto array,focal-radius: ratio,

) → gradient

`stops`
color o array
ObligatorioPosicional
Variádico

Las paradas de color del degradado.

Mirá también la documentación del degradado lineal para más detalles.

`space`
auto o spot o any
Por defecto: `auto`

El espacio de color en el que se interpola el degradado.

Por defecto es un espacio de color perceptualmente uniforme llamado Oklab.

`relative`
auto o str
Por defecto: `auto`

La ubicación relativa del degradado.

El padre de un elemento es el box o block más interno que contiene el elemento o, si no hay ninguno, la propia página.

Variante	Detalles
`"self"`	Relativo a sí mismo (su propio cuadro delimitador).
`"parent"`	Relativo a su elemento padre (el cuadro delimitador del padre).

`center`
array
Por defecto: `(50%, 50%)`

El centro del círculo final del degradado.

Un valor de (50%, 50%) significa que el círculo final está centrado dentro de su contenedor.

`radius`
ratio
Por defecto: `50%`

El radio del círculo final del degradado.

Por defecto, se establece en 50%. El radio final debe ser mayor que el radio focal.

`focal-center`
auto o array
Por defecto: `auto`

El centro del círculo focal del degradado.

El centro focal debe estar dentro del círculo final.

Un valor de (50%, 50%) significa que el círculo focal está centrado dentro de su contenedor.

Por defecto, se establece igual que el centro del último círculo.

`focal-radius`
ratio
Por defecto: `0%`

El radio del círculo focal del degradado.

El centro focal debe estar dentro del círculo final.

Por defecto, se establece en 0%. El radio focal debe ser menor que el radio final.

`conic`Desde: 0.9.0

Crea un degradado cónico nuevo, en el que los colores cambian radialmente alrededor de un punto central.

Podés controlar el punto central del degradado con el argumento center. Por defecto, el punto central es el centro de la forma.

Ver ejemplo


#stack(
  dir: ltr,
  spacing: 1fr,
  circle(fill: gradient.conic(
    ..color.map.viridis,
  )),
  circle(fill: gradient.conic(
    ..color.map.viridis,
    center: (20%, 30%),
  )),
)

gradient.conic(

..color array,angle: angle,space: auto spotany,relative: auto str,center: array,

) → gradient

`stops`
color o array
ObligatorioPosicional
Variádico

Las paradas de color del degradado.

Mirá también la documentación del degradado lineal para más detalles.

`angle`
angle
Por defecto: `0deg`

El ángulo del degradado.

`space`
auto o spot o any
Por defecto: `auto`

El espacio de color en el que se interpola el degradado.

Por defecto es un espacio de color perceptualmente uniforme llamado Oklab.

`relative`
auto o str
Por defecto: `auto`

La ubicación relativa del degradado.

El padre de un elemento es el box o block más interno que contiene el elemento o, si no hay ninguno, la propia página.

Variante	Detalles
`"self"`	Relativo a sí mismo (su propio cuadro delimitador).
`"parent"`	Relativo a su elemento padre (el cuadro delimitador del padre).

`center`
array
Por defecto: `(50%, 50%)`

El centro del círculo del degradado.

Un valor de (50%, 50%) significa que el círculo está centrado dentro de su contenedor.

`sharp`Desde: 0.9.0

Crea una versión nítida de este degradado.

Los degradados nítidos tienen saltos discretos entre colores, en lugar de una transición suave. Son particularmente útiles para crear listas de colores para un degradado predefinido.

Ver ejemplo


#set rect(width: 100%, height: 20pt)
#let grad = gradient.linear(..color.map.rainbow)
#rect(fill: grad)
#rect(fill: grad.sharp(5))
#rect(fill: grad.sharp(5, smoothness: 20%))

self.sharp(

int,smoothness: ratio,

) → gradient

`steps`
int
ObligatorioPosicional

La cantidad de paradas del degradado.

`smoothness`
ratio
Por defecto: `0%`

Cuánto se suaviza el degradado.

`repeat`Desde: 0.9.0

Repite este degradado una cantidad dada de veces, opcionalmente reflejándolo en cada segunda repetición.

Ver ejemplo


#circle(
  radius: 40pt,
  fill: gradient
    .radial(aqua, white)
    .repeat(4),
)

self.repeat(

int,mirror: bool,

) → gradient

`repetitions`
int
ObligatorioPosicional

La cantidad de veces que se repite el degradado.

`mirror`
bool
Por defecto: `false`

Si se refleja el degradado en cada segunda repetición, es decir, la primera instancia (y todas las impares) permanece sin cambios.

Ver ejemplo


#circle(
  radius: 40pt,
  fill: gradient
    .conic(green, black)
    .repeat(2, mirror: true)
)

`kind`Desde: 0.9.0

Devuelve el tipo de este degradado.

self.kind() → function

`stops`Desde: 0.9.0

Devuelve las paradas de este degradado.

self.stops() → array

`space`Desde: 0.9.0

Devuelve el espacio de mezcla de este degradado.

self.space() → spotany

`relative`Desde: 0.9.0

Devuelve la ubicación relativa de este degradado.

self.relative() → auto str

`angle`Desde: 0.9.0

Devuelve el ángulo de este degradado.

Devuelve none si el degradado no es ni lineal ni cónico.

self.angle() → none angle

`center`Desde: 0.13.0

Devuelve el centro de este degradado.

Devuelve none si el degradado no es ni radial ni cónico.

self.center() → none array

`radius`Desde: 0.13.0

Devuelve el radio de este degradado.

Devuelve none si el degradado no es radial.

self.radius() → none ratio

`focal-center`Desde: 0.13.0

Devuelve el centro focal de este degradado.

Devuelve none si el degradado no es radial.

self.focal-center() → none array

`focal-radius`Desde: 0.13.0

Devuelve el radio focal de este degradado.

Devuelve none si el degradado no es radial.

self.focal-radius() → none ratio

`sample`Desde: 0.9.0

Muestrea el degradado en una posición dada.

La posición es una posición a lo largo del degradado (una proporción entre 0% y 100%) o un ángulo. Cualquier valor fuera de este rango se acotará.

self.sample(angle ratio) → color

`t`
angle o ratio
ObligatorioPosicional

La posición en la que se muestrea el degradado.

`samples`Desde: 0.9.0

Muestrea el degradado en varias posiciones a la vez y devuelve los resultados como un array.

self.samples(..angle ratio) → array

`ts`
angle o ratio
ObligatorioPosicional
Variádico

Las posiciones en las que se muestrea el degradado.

ElipsePágina anterior

ImagenPágina siguiente

gradientDesde: 0.9.0Ir al código fuente

Ejemplos

Paradas

Relatividad

Espacios de color e interpolación

Dirección

Nota sobre los tamaños de archivo

FuncionesSigno de preguntaLas funciones y los tipos pueden definir funciones. Se accede a estos miembros indicando la función o el tipo, seguido de un punto y, luego, el nombre de la función.

linearDesde: 0.9.0Ir al código fuente

stopscolor o arrayObligatorioPosicionalSigno de preguntaLos parámetros posicionales se especifican en orden, sin nombres.VariádicoSigno de preguntaLos parámetros variádicos pueden especificarse varias veces.

spaceauto o spot o anyPor defecto: auto

relativeauto o strPor defecto: auto

dirdirectionPosicionalSigno de preguntaLos parámetros posicionales se especifican en orden, sin nombres.Por defecto: ltr

angleangleObligatorioPosicionalSigno de preguntaLos parámetros posicionales se especifican en orden, sin nombres.

radialDesde: 0.9.0Ir al código fuente

stopscolor o arrayObligatorioPosicionalSigno de preguntaLos parámetros posicionales se especifican en orden, sin nombres.VariádicoSigno de preguntaLos parámetros variádicos pueden especificarse varias veces.

spaceauto o spot o anyPor defecto: auto

relativeauto o strPor defecto: auto

centerarrayPor defecto: (50%, 50%)

radiusratioPor defecto: 50%

focal-centerauto o arrayPor defecto: auto

focal-radiusratioPor defecto: 0%

conicDesde: 0.9.0Ir al código fuente

stopscolor o arrayObligatorioPosicionalSigno de preguntaLos parámetros posicionales se especifican en orden, sin nombres.VariádicoSigno de preguntaLos parámetros variádicos pueden especificarse varias veces.

angleanglePor defecto: 0deg

spaceauto o spot o anyPor defecto: auto

relativeauto o strPor defecto: auto

centerarrayPor defecto: (50%, 50%)

sharpDesde: 0.9.0Ir al código fuente

stepsintObligatorioPosicionalSigno de preguntaLos parámetros posicionales se especifican en orden, sin nombres.

smoothnessratioPor defecto: 0%

repeatDesde: 0.9.0Ir al código fuente

repetitionsintObligatorioPosicionalSigno de preguntaLos parámetros posicionales se especifican en orden, sin nombres.

mirrorboolPor defecto: false

kindDesde: 0.9.0Ir al código fuente

stopsDesde: 0.9.0Ir al código fuente

spaceDesde: 0.9.0Ir al código fuente

relativeDesde: 0.9.0Ir al código fuente

angleDesde: 0.9.0Ir al código fuente

centerDesde: 0.13.0Ir al código fuente

radiusDesde: 0.13.0Ir al código fuente

focal-centerDesde: 0.13.0Ir al código fuente

focal-radiusDesde: 0.13.0Ir al código fuente

sampleDesde: 0.9.0Ir al código fuente

tangle o ratioObligatorioPosicionalSigno de preguntaLos parámetros posicionales se especifican en orden, sin nombres.

samplesDesde: 0.9.0Ir al código fuente

tsangle o ratioObligatorioPosicionalSigno de preguntaLos parámetros posicionales se especifican en orden, sin nombres.VariádicoSigno de preguntaLos parámetros variádicos pueden especificarse varias veces.

gradientDesde: 0.9.0

Funciones

`linear`Desde: 0.9.0

`stops`
color o array
ObligatorioPosicional
Variádico

`space`
auto o spot o any
Por defecto: `auto`

`relative`
auto o str
Por defecto: `auto`

`dir`
direction
Posicional
Por defecto: `ltr`

`angle`
angle
ObligatorioPosicional

`radial`Desde: 0.9.0

`stops`
color o array
ObligatorioPosicional
Variádico

`space`
auto o spot o any
Por defecto: `auto`

`relative`
auto o str
Por defecto: `auto`

`center`
array
Por defecto: `(50%, 50%)`

`radius`
ratio
Por defecto: `50%`

`focal-center`
auto o array
Por defecto: `auto`

`focal-radius`
ratio
Por defecto: `0%`

`conic`Desde: 0.9.0

`stops`
color o array
ObligatorioPosicional
Variádico

`angle`
angle
Por defecto: `0deg`

`space`
auto o spot o any
Por defecto: `auto`

`relative`
auto o str
Por defecto: `auto`

`center`
array
Por defecto: `(50%, 50%)`

`sharp`Desde: 0.9.0

`steps`
int
ObligatorioPosicional

`smoothness`
ratio
Por defecto: `0%`

`repeat`Desde: 0.9.0

`repetitions`
int
ObligatorioPosicional

`mirror`
bool
Por defecto: `false`

`kind`Desde: 0.9.0

`stops`Desde: 0.9.0

`space`Desde: 0.9.0

`relative`Desde: 0.9.0

`angle`Desde: 0.9.0

`center`Desde: 0.13.0

`radius`Desde: 0.13.0

`focal-center`Desde: 0.13.0

`focal-radius`Desde: 0.13.0

`sample`Desde: 0.9.0

`t`
angle o ratio
ObligatorioPosicional

`samples`Desde: 0.9.0

`ts`
angle o ratio
ObligatorioPosicional
Variádico