Effects

mask-image

Name: Fynydd
Address: 630 Freedom Business Center Drive, King of Prussia, Pennsylvania, 19406, United States
Telephone: +1 855-439-6933
Rating: 4.9

Utilities for applying image-based masks.

Quick reference

Mask

Class Styles

mask-radial-circle

--sf-mask-radial-shape: circle;

mask-radial-ellipse

--sf-mask-radial-shape: ellipse;

mask-radial-closest-corner

--sf-mask-radial-size: closest-corner;

mask-radial-closest-side

--sf-mask-radial-size: closest-side;

mask-radial-farthest-corner

--sf-mask-radial-size: farthest-corner;

mask-radial-farthest-side

--sf-mask-radial-size: farthest-side;

mask-radial-at-top-left

--sf-mask-radial-position: top left;

mask-radial-at-top

--sf-mask-radial-position: top;

mask-radial-at-top-right

--sf-mask-radial-position: top right;

mask-radial-at-left

--sf-mask-radial-position: left;

mask-radial-at-center

--sf-mask-radial-position: center;

mask-radial-at-right

--sf-mask-radial-position: right;

mask-radial-at-bottom-left

--sf-mask-radial-position: bottom left;

mask-radial-at-bottom

--sf-mask-radial-position: bottom;

mask-radial-at-bottom-right

--sf-mask-radial-position: bottom right;

mask-linear-<angle>

--sf-mask-linear-position: <angle>deg;
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops, var(--sf-mask-linear-position)));/* 0deg */

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-45

--sf-mask-linear-position: 45deg;
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops, var(--sf-mask-linear-position)));

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-[<value>]

--sf-mask-linear-position: <value>;
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops, var(--sf-mask-linear-position)));/* 0deg */

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-[45deg]

--sf-mask-linear-position: 45deg;
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops, var(--sf-mask-linear-position)));

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-(<custom-property>)

--sf-mask-linear-position: var(<custom-property>);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops, var(--sf-mask-linear-position)));/* 0deg */

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-(--my-angle)

--sf-mask-linear-position: var(--my-angle);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops, var(--sf-mask-linear-position)));

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-(angle:<custom-property>)

--sf-mask-linear-position: var(<custom-property>);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops, var(--sf-mask-linear-position)));/* 0deg */

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-(angle:--my-angle)

--sf-mask-linear-position: var(--my-angle);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops, var(--sf-mask-linear-position)));

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

-mask-linear-<angle>

--sf-mask-linear-position: -<angle>deg;
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops, var(--sf-mask-linear-position)));/* 0deg */

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

-mask-linear-45

--sf-mask-linear-position: -45deg;
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops, var(--sf-mask-linear-position)));

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-radial-<number>

--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops, var(--sf-mask-radial-size)));/* farthest-corner */
--sf-mask-radial-size: <number>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-4

--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops, var(--sf-mask-radial-size)));
--sf-mask-radial-size: 4;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-<fraction>

--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops, var(--sf-mask-radial-size)));/* farthest-corner */
--sf-mask-radial-size: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-1/2

--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops, var(--sf-mask-radial-size)));
--sf-mask-radial-size: 50%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-[<value>]

--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops, var(--sf-mask-radial-size)));/* farthest-corner */
--sf-mask-radial-size: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-[initial]

--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops, var(--sf-mask-radial-size)));
--sf-mask-radial-size: initial;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-(<custom-property>)

--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops, var(--sf-mask-radial-size)));/* farthest-corner */
--sf-mask-radial-size: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-(--my-length)

--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops, var(--sf-mask-radial-size)));
--sf-mask-radial-size: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-(length:<custom-property>)

--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops, var(--sf-mask-radial-size)));/* farthest-corner */
--sf-mask-radial-size: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-(length:--my-length)

--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops, var(--sf-mask-radial-size)));
--sf-mask-radial-size: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-<angle>

--sf-mask-conic: conic-gradient(from <angle>deg, black var(--sf-mask-conic-from), transparent var(--sf-mask-conic-to));

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-45

--sf-mask-conic: conic-gradient(from 45deg, black var(--sf-mask-conic-from), transparent var(--sf-mask-conic-to));

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-[<value>]

--sf-mask-conic: conic-gradient(from <value>, black var(--sf-mask-conic-from), transparent var(--sf-mask-conic-to));

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-[45deg]

--sf-mask-conic: conic-gradient(from 45deg, black var(--sf-mask-conic-from), transparent var(--sf-mask-conic-to));

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-(<custom-property>)

--sf-mask-conic: conic-gradient(from var(<custom-property>), black var(--sf-mask-conic-from), transparent var(--sf-mask-conic-to));

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-(--my-angle)

--sf-mask-conic: conic-gradient(from var(--my-angle), black var(--sf-mask-conic-from), transparent var(--sf-mask-conic-to));

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-(angle:<custom-property>)

--sf-mask-conic: conic-gradient(from var(<custom-property>), black var(--sf-mask-conic-from), transparent var(--sf-mask-conic-to));

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-(angle:--my-angle)

--sf-mask-conic: conic-gradient(from var(--my-angle), black var(--sf-mask-conic-from), transparent var(--sf-mask-conic-to));

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

-mask-conic-<angle>

--sf-mask-conic: conic-gradient(from -<angle>deg, black var(--sf-mask-conic-from), transparent var(--sf-mask-conic-to));

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

-mask-conic-45

--sf-mask-conic: conic-gradient(from -45deg, black var(--sf-mask-conic-from), transparent var(--sf-mask-conic-to));

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

Mask Color

Class Styles

mask-linear-from-<color-name>

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-from-red-500

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-from-color: var(--color-red-500);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-from-<color-name>/<opacity>

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-from-red-500/42

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-from-color: color-mix(in oklab, var(--color-red-500) 42%, transparent);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-from-[<value>]

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-from-[#ff0000]

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-from-color: #ff0000;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-from-[<value>]/<opacity>

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-from-[#ff0000]/42

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-from-color: rgba(255,0,0,0.42);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-from-(<custom-property>)

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-from-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-from-(--my-color)

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-from-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-from-(color:<custom-property>)

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-from-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-from-(color:--my-color)

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-from-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-to-<color-name>

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-to-red-500

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-to-color: var(--color-red-500);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-to-<color-name>/<opacity>

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-to-red-500/42

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-to-color: color-mix(in oklab, var(--color-red-500) 42%, transparent);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-to-[<value>]

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-to-[#ff0000]

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-to-color: #ff0000;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-to-[<value>]/<opacity>

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-to-[#ff0000]/42

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-to-color: rgba(255,0,0,0.42);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-to-(<custom-property>)

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-to-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-to-(--my-color)

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-to-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-to-(color:<custom-property>)

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-to-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-to-(color:--my-color)

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-to-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-from-<color-name>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-from-red-500

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-from-color: var(--color-red-500);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-from-<color-name>/<opacity>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-from-red-500/42

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-from-color: color-mix(in oklab, var(--color-red-500) 42%, transparent);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-from-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-from-[#ff0000]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-from-color: #ff0000;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-from-[<value>]/<opacity>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-from-[#ff0000]/42

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-from-color: rgba(255,0,0,0.42);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-from-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-from-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-from-(--my-color)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-from-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-from-(color:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-from-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-from-(color:--my-color)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-from-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-to-<color-name>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-to-red-500

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-to-color: var(--color-red-500);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-to-<color-name>/<opacity>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-to-red-500/42

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-to-color: color-mix(in oklab, var(--color-red-500) 42%, transparent);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-to-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-to-[#ff0000]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-to-color: #ff0000;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-to-[<value>]/<opacity>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-to-[#ff0000]/42

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-to-color: rgba(255,0,0,0.42);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-to-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-to-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-to-(--my-color)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-to-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-to-(color:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-to-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-to-(color:--my-color)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-to-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-from-<color-name>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-from-red-500

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-from-color: var(--color-red-500);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-from-<color-name>/<opacity>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-from-red-500/42

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-from-color: color-mix(in oklab, var(--color-red-500) 42%, transparent);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-from-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-from-[#ff0000]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-from-color: #ff0000;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-from-[<value>]/<opacity>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-from-[#ff0000]/42

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-from-color: rgba(255,0,0,0.42);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-from-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-from-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-from-(--my-color)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-from-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-from-(color:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-from-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-from-(color:--my-color)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-from-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-to-<color-name>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-to-red-500

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-to-color: var(--color-red-500);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-to-<color-name>/<opacity>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-to-red-500/42

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-to-color: color-mix(in oklab, var(--color-red-500) 42%, transparent);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-to-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-to-[#ff0000]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-to-color: #ff0000;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-to-[<value>]/<opacity>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-to-[#ff0000]/42

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-to-color: rgba(255,0,0,0.42);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-to-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-to-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-to-(--my-color)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-to-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-to-(color:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-to-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-to-(color:--my-color)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-to-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-b-from-<color-name>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-from-red-500

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-from-color: var(--color-red-500);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-from-<color-name>/<opacity>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-from-red-500/42

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-from-color: color-mix(in oklab, var(--color-red-500) 42%, transparent);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-from-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-from-[#ff0000]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-from-color: #ff0000;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-from-[<value>]/<opacity>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-from-[#ff0000]/42

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-from-color: rgba(255,0,0,0.42);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-from-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-from-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-from-(--my-color)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-from-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-from-(color:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-from-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-from-(color:--my-color)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-from-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-to-<color-name>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-to-red-500

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-to-color: var(--color-red-500);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-to-<color-name>/<opacity>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-to-red-500/42

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-to-color: color-mix(in oklab, var(--color-red-500) 42%, transparent);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-to-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-to-[#ff0000]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-to-color: #ff0000;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-to-[<value>]/<opacity>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-to-[#ff0000]/42

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-to-color: rgba(255,0,0,0.42);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-to-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-to-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-to-(--my-color)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-to-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-to-(color:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-to-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-to-(color:--my-color)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-to-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-from-<color-name>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-from-red-500

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-from-color: var(--color-red-500);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-from-<color-name>/<opacity>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-from-red-500/42

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-from-color: color-mix(in oklab, var(--color-red-500) 42%, transparent);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-from-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-from-[#ff0000]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-from-color: #ff0000;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-from-[<value>]/<opacity>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-from-[#ff0000]/42

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-from-color: rgba(255,0,0,0.42);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-from-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-from-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-from-(--my-color)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-from-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-from-(color:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-from-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-from-(color:--my-color)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-from-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-to-<color-name>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-to-red-500

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-to-color: var(--color-red-500);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-to-<color-name>/<opacity>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-to-red-500/42

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-to-color: color-mix(in oklab, var(--color-red-500) 42%, transparent);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-to-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-to-[#ff0000]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-to-color: #ff0000;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-to-[<value>]/<opacity>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-to-[#ff0000]/42

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-to-color: rgba(255,0,0,0.42);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-to-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-to-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-to-(--my-color)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-to-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-to-(color:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-to-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-to-(color:--my-color)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-to-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-from-<color-name>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-from-position: <value>;
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-from-red-500

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-from-position: var(--color-red-500);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-from-color: var(--color-red-500);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-from-<color-name>/<opacity>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-from-position: <value>;
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-from-red-500/42

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-from-position: color-mix(in oklab, var(--color-red-500) 42%, transparent);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-from-color: color-mix(in oklab, var(--color-red-500) 42%, transparent);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-from-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-from-position: <value>;
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-from-[#ff0000]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-from-position: #ff0000;
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-from-color: #ff0000;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-from-[<value>]/<opacity>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-from-position: <value>;
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-from-[#ff0000]/42

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-from-position: rgba(255,0,0,0.42);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-from-color: rgba(255,0,0,0.42);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-from-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-from-position: var(<custom-property>);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-from-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-from-(--my-color)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-from-position: var(--my-color);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-from-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-from-(color:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-from-position: var(<custom-property>);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-from-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-from-(color:--my-color)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-from-position: var(--my-color);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-from-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-to-<color-name>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-to-color: <value>;
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-to-red-500

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-to-color: var(--color-red-500);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-to-color: var(--color-red-500);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-to-<color-name>/<opacity>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-to-color: <value>;
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-to-red-500/42

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-to-color: color-mix(in oklab, var(--color-red-500) 42%, transparent);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-to-color: color-mix(in oklab, var(--color-red-500) 42%, transparent);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-to-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-to-color: <value>;
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-to-[#ff0000]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-to-color: #ff0000;
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-to-color: #ff0000;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-to-[<value>]/<opacity>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-to-color: <value>;
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-to-[#ff0000]/42

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-to-color: rgba(255,0,0,0.42);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-to-color: rgba(255,0,0,0.42);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-to-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-to-color: var(<custom-property>);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-to-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-to-(--my-color)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-to-color: var(--my-color);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-to-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-to-(color:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-to-color: var(<custom-property>);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-to-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-to-(color:--my-color)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-to-color: var(--my-color);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-to-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-from-<color-name>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-from-color: <value>;
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-from-red-500

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-from-color: var(--color-red-500);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-from-color: var(--color-red-500);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-from-<color-name>/<opacity>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-from-color: <value>;
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-from-red-500/42

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-from-color: color-mix(in oklab, var(--color-red-500) 42%, transparent);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-from-color: color-mix(in oklab, var(--color-red-500) 42%, transparent);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-from-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-from-color: <value>;
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-from-[#ff0000]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-from-color: #ff0000;
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-from-color: #ff0000;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-from-[<value>]/<opacity>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-from-color: <value>;
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-from-[#ff0000]/42

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-from-color: rgba(255,0,0,0.42);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-from-color: rgba(255,0,0,0.42);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-from-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-from-color: var(<custom-property>);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-from-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-from-(--my-color)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-from-color: var(--my-color);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-from-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-from-(color:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-from-color: var(<custom-property>);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-from-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-from-(color:--my-color)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-from-color: var(--my-color);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-from-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-to-<color-name>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-to-color: <value>;
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-to-red-500

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-to-color: var(--color-red-500);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-to-color: var(--color-red-500);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-to-<color-name>/<opacity>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-to-color: <value>;
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-to-red-500/42

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-to-color: color-mix(in oklab, var(--color-red-500) 42%, transparent);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-to-color: color-mix(in oklab, var(--color-red-500) 42%, transparent);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-to-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-to-color: <value>;
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-to-[#ff0000]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-to-color: #ff0000;
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-to-color: #ff0000;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-to-[<value>]/<opacity>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-to-color: <value>;
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-to-[#ff0000]/42

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-to-color: rgba(255,0,0,0.42);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-to-color: rgba(255,0,0,0.42);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-to-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-to-color: var(<custom-property>);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-to-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-to-(--my-color)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-to-color: var(--my-color);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-to-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-to-(color:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-to-color: var(<custom-property>);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-to-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-to-(color:--my-color)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-to-color: var(--my-color);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-to-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-from-<color-name>

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);/* ellipse, farthest-corner, center, black, 0%, transparent, 100% */
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-from-red-500

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-from-color: var(--color-red-500);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-from-<color-name>/<opacity>

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);/* ellipse, farthest-corner, center, black, 0%, transparent, 100% */
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-from-red-500/42

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-from-color: color-mix(in oklab, var(--color-red-500) 42%, transparent);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-from-[<value>]

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);/* ellipse, farthest-corner, center, black, 0%, transparent, 100% */
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-from-[#ff0000]

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-from-color: #ff0000;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-from-[<value>]/<opacity>

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);/* ellipse, farthest-corner, center, black, 0%, transparent, 100% */
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-from-[#ff0000]/42

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-from-color: rgba(255,0,0,0.42);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-from-(<custom-property>)

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);/* ellipse, farthest-corner, center, black, 0%, transparent, 100% */
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-from-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-from-(--my-color)

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-from-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-from-(color:<custom-property>)

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);/* ellipse, farthest-corner, center, black, 0%, transparent, 100% */
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-from-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-from-(color:--my-color)

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-from-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-to-<color-name>

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);/* ellipse, farthest-corner, center, black, 0%, transparent, 100% */
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-to-red-500

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-to-color: var(--color-red-500);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-to-<color-name>/<opacity>

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);/* ellipse, farthest-corner, center, black, 0%, transparent, 100% */
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-to-red-500/42

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-to-color: color-mix(in oklab, var(--color-red-500) 42%, transparent);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-to-[<value>]

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);/* ellipse, farthest-corner, center, black, 0%, transparent, 100% */
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-to-[#ff0000]

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-to-color: #ff0000;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-to-[<value>]/<opacity>

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);/* ellipse, farthest-corner, center, black, 0%, transparent, 100% */
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-to-[#ff0000]/42

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-to-color: rgba(255,0,0,0.42);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-to-(<custom-property>)

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);/* ellipse, farthest-corner, center, black, 0%, transparent, 100% */
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-to-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-to-(--my-color)

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-to-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-to-(color:<custom-property>)

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);/* ellipse, farthest-corner, center, black, 0%, transparent, 100% */
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-to-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-to-(color:--my-color)

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-to-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-from-<color-name>

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-from-red-500

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-from-color: var(--color-red-500);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-from-<color-name>/<opacity>

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-from-red-500/42

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-from-color: color-mix(in oklab, var(--color-red-500) 42%, transparent);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-from-[<value>]

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-from-[#ff0000]

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-from-color: #ff0000;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-from-[<value>]/<opacity>

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-from-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-from-[#ff0000]/42

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-from-color: rgba(255,0,0,0.42);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-from-(<custom-property>)

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-from-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-from-(--my-color)

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-from-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-from-(color:<custom-property>)

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-from-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-from-(color:--my-color)

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-from-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-to-<color-name>

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-to-red-500

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-to-color: var(--color-red-500);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-to-<color-name>/<opacity>

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-to-red-500/42

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-to-color: color-mix(in oklab, var(--color-red-500) 42%, transparent);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-to-[<value>]

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-to-[#ff0000]

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-to-color: #ff0000;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-to-[<value>]/<opacity>

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-to-color: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-to-[#ff0000]/42

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-to-color: rgba(255,0,0,0.42);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-to-(<custom-property>)

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-to-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-to-(--my-color)

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-to-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-to-(color:<custom-property>)

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-to-color: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-to-(color:--my-color)

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-to-color: var(--my-color);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

Mask Dimension Length

Class Styles

mask-linear-from-<number>

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-from-position: calc(var(--spacing) * <number>);/* 0.25rem */

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-from-4

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-from-position: calc(var(--spacing) * 4);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-from-<fraction>

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-from-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-from-1/2

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-from-position: 50%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-from-[<value>]

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-from-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-from-[1rem]

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-from-position: 1rem;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-from-(<custom-property>)

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-from-(--my-length)

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-from-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-from-(length:<custom-property>)

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-from-(length:--my-length)

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-from-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-to-<number>

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-to-position: calc(var(--spacing) * <number>);/* 0.25rem */

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-to-4

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-to-position: calc(var(--spacing) * 4);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-to-<fraction>

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-to-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-to-1/2

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-to-position: 50%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-to-[<value>]

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-to-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-to-[1rem]

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-to-position: 1rem;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-to-(<custom-property>)

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-to-(--my-length)

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-to-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-to-(length:<custom-property>)

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-to-(length:--my-length)

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-to-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-from-<number>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-from-position: calc(var(--spacing) * <number>);/* 0.25rem */

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-from-4

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-from-position: calc(var(--spacing) * 4);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-from-<fraction>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-from-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-from-1/2

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-from-position: 50%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-from-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-from-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-from-[1rem]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-from-position: 1rem;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-from-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-from-(--my-length)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-from-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-from-(length:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-from-(length:--my-length)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-from-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-to-<number>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-to-position: calc(var(--spacing) * <number>);/* 0.25rem */

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-to-4

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-to-position: calc(var(--spacing) * 4);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-to-<fraction>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-to-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-to-1/2

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-to-position: 50%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-to-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-to-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-to-[1rem]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-to-position: 1rem;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-to-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-to-(--my-length)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-to-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-to-(length:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-to-(length:--my-length)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-to-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-from-<number>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-from-position: calc(var(--spacing) * <number>);/* 0.25rem */

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-from-4

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-from-position: calc(var(--spacing) * 4);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-from-<fraction>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-from-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-from-1/2

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-from-position: 50%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-from-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-from-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-from-[1rem]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-from-position: 1rem;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-from-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-from-(--my-length)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-from-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-from-(length:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-from-(length:--my-length)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-from-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-to-<number>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-to-position: calc(var(--spacing) * <number>);/* 0.25rem */

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-to-4

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-to-position: calc(var(--spacing) * 4);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-to-<fraction>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-to-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-to-1/2

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-to-position: 50%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-to-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-to-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-to-[1rem]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-to-position: 1rem;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-to-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-to-(--my-length)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-to-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-to-(length:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-to-(length:--my-length)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-to-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-b-from-<number>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-from-position: calc(var(--spacing) * <number>);/* 0.25rem */

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-from-4

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-from-position: calc(var(--spacing) * 4);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-from-<fraction>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-from-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-from-1/2

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-from-position: 50%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-from-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-from-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-from-[1rem]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-from-position: 1rem;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-from-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-from-(--my-length)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-from-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-from-(length:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-from-(length:--my-length)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-from-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-to-<number>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-to-position: calc(var(--spacing) * <number>);/* 0.25rem */

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-to-4

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-to-position: calc(var(--spacing) * 4);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-to-<fraction>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-to-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-to-1/2

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-to-position: 50%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-to-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-to-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-to-[1rem]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-to-position: 1rem;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-to-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-to-(--my-length)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-to-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-to-(length:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-to-(length:--my-length)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-to-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-from-<number>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-from-position: calc(var(--spacing) * <number>);/* 0.25rem */

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-from-4

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-from-position: calc(var(--spacing) * 4);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-from-<fraction>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-from-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-from-1/2

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-from-position: 50%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-from-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-from-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-from-[1rem]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-from-position: 1rem;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-from-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-from-(--my-length)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-from-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-from-(length:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-from-(length:--my-length)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-from-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-to-<number>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-to-position: calc(var(--spacing) * <number>);/* 0.25rem */

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-to-4

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-to-position: calc(var(--spacing) * 4);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-to-<fraction>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-to-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-to-1/2

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-to-position: 50%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-to-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-to-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-to-[1rem]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-to-position: 1rem;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-to-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-to-(--my-length)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-to-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-to-(length:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-to-(length:--my-length)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-to-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-from-<number>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-from-position: calc(var(--spacing) * <number>);/* 0.25rem */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-from-position: calc(var(--spacing) * <number>);/* 0.25rem */

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-from-4

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-from-position: calc(var(--spacing) * 4);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-from-position: calc(var(--spacing) * 4);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-from-<fraction>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-from-position: <percentage>;
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-from-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-from-1/2

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-from-position: 50%;
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-from-position: 50%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-from-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-from-position: <value>;
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-from-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-from-[1rem]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-from-position: 1rem;
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-from-position: 1rem;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-from-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-from-position: var(<custom-property>);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-from-(--my-length)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-from-position: var(--my-length);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-from-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-from-(length:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-from-position: var(<custom-property>);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-from-(length:--my-length)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-from-position: var(--my-length);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-from-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-to-<number>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-to-position: calc(var(--spacing) * <number>);/* 0.25rem */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-to-position: calc(var(--spacing) * <number>);/* 0.25rem */

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-to-4

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-to-position: calc(var(--spacing) * 4);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-to-position: calc(var(--spacing) * 4);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-to-<fraction>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-to-position: <percentage>;
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-to-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-to-1/2

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-to-position: 50%;
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-to-position: 50%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-to-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-to-position: <value>;
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-to-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-to-[1rem]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-to-position: 1rem;
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-to-position: 1rem;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-to-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-to-position: var(<custom-property>);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-to-(--my-length)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-to-position: var(--my-length);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-to-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-to-(length:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-to-position: var(<custom-property>);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-to-(length:--my-length)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-to-position: var(--my-length);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-to-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-from-<number>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-from-position: calc(var(--spacing) * <number>);/* 0.25rem */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-from-position: calc(var(--spacing) * <number>);/* 0.25rem */

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-from-4

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-from-position: calc(var(--spacing) * 4);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-from-position: calc(var(--spacing) * 4);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-from-<fraction>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-from-position: <percentage>;
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-from-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-from-1/2

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-from-position: 50%;
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-from-position: 50%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-from-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-from-position: <value>;
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-from-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-from-[1rem]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-from-position: 1rem;
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-from-position: 1rem;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-from-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-from-position: var(<custom-property>);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-from-(--my-length)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-from-position: var(--my-length);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-from-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-from-(length:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-from-position: var(<custom-property>);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-from-(length:--my-length)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-from-position: var(--my-length);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-from-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-to-<number>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-to-position: calc(var(--spacing) * <number>);/* 0.25rem */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-to-position: calc(var(--spacing) * <number>);/* 0.25rem */

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-to-4

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-to-position: calc(var(--spacing) * 4);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-to-position: calc(var(--spacing) * 4);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-to-<fraction>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-to-position: <percentage>;
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-to-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-to-1/2

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-to-position: 50%;
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-to-position: 50%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-to-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-to-position: <value>;
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-to-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-to-[1rem]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-to-position: 1rem;
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-to-position: 1rem;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-to-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-to-position: var(<custom-property>);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-to-(--my-length)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-to-position: var(--my-length);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-to-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-to-(length:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-to-position: var(<custom-property>);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-to-(length:--my-length)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-to-position: var(--my-length);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-to-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-from-<number>

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);/* ellipse, farthest-corner, center, black, 0%, transparent, 100% */
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-from-position: calc(var(--spacing) * <number>);/* 0.25rem */

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-from-4

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-from-position: calc(var(--spacing) * 4);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-from-<fraction>

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);/* ellipse, farthest-corner, center, black, 0%, transparent, 100% */
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-from-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-from-1/2

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-from-position: 50%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-from-[<value>]

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);/* ellipse, farthest-corner, center, black, 0%, transparent, 100% */
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-from-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-from-[1rem]

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-from-position: 1rem;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-from-(<custom-property>)

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);/* ellipse, farthest-corner, center, black, 0%, transparent, 100% */
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-from-(--my-length)

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-from-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-from-(length:<custom-property>)

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);/* ellipse, farthest-corner, center, black, 0%, transparent, 100% */
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-from-(length:--my-length)

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-from-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-to-<number>

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);/* ellipse, farthest-corner, center, black, 0%, transparent, 100% */
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-to-position: calc(var(--spacing) * <number>);/* 0.25rem */

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-to-4

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-to-position: calc(var(--spacing) * 4);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-to-<fraction>

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);/* ellipse, farthest-corner, center, black, 0%, transparent, 100% */
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-to-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-to-1/2

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-to-position: 50%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-to-[<value>]

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);/* ellipse, farthest-corner, center, black, 0%, transparent, 100% */
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-to-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-to-[1rem]

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-to-position: 1rem;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-to-(<custom-property>)

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);/* ellipse, farthest-corner, center, black, 0%, transparent, 100% */
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-to-(--my-length)

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-to-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-to-(length:<custom-property>)

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);/* ellipse, farthest-corner, center, black, 0%, transparent, 100% */
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-to-(length:--my-length)

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-to-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-from-<number>

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-from-position: calc(var(--spacing) * <number>);/* 0.25rem */

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-from-4

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-from-position: calc(var(--spacing) * 4);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-from-<fraction>

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-from-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-from-1/2

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-from-position: 50%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-from-[<value>]

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-from-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-from-[1rem]

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-from-position: 1rem;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-from-(<custom-property>)

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-from-(--my-length)

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-from-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-from-(length:<custom-property>)

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-from-(length:--my-length)

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-from-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-to-<number>

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-to-position: calc(var(--spacing) * <number>);/* 0.25rem */

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-to-4

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-to-position: calc(var(--spacing) * 4);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-to-<fraction>

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-to-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-to-1/2

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-to-position: 50%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-to-[<value>]

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-to-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-to-[1rem]

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-to-position: 1rem;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-to-(<custom-property>)

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-to-(--my-length)

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-to-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-to-(length:<custom-property>)

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-to-(length:--my-length)

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-to-position: var(--my-length);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

Mask Image

Class Styles

mask-none

-webkit-mask-image: none;
mask-image: none;

mask-[<url>]

-webkit-mask-image: <url>;
mask-image: <url>;

mask-[/images/logo.jpg]

-webkit-mask-image: url("/images/logo.jpg");
mask-image: url("/images/logo.jpg");

mask-(<custom-property>)

-webkit-mask-image: var(<custom-property>);
mask-image: var(<custom-property>);

mask-(--my-image)

-webkit-mask-image: var(--my-image);
mask-image: var(--my-image);

mask-(url:<custom-property>)

-webkit-mask-image: var(<custom-property>);
mask-image: var(<custom-property>);

mask-(url:--my-image)

-webkit-mask-image: var(--my-image);
mask-image: var(--my-image);

Mask Percentage

Class Styles

mask-linear-from-<percentage>

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-from-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-from-42%

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-from-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-from-[<value>]

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-from-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-from-[42%]

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-from-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-from-(<custom-property>)

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-from-(--my-percentage)

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-from-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-from-(percentage:<custom-property>)

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-from-(percentage:--my-percentage)

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-from-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-to-<percentage>

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-to-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-to-42%

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-to-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-to-[<value>]

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-to-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-to-[42%]

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-to-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-to-(<custom-property>)

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-to-(--my-percentage)

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-to-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-to-(percentage:<custom-property>)

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-linear-to-(percentage:--my-percentage)

--sf-mask-linear-stops: var(--sf-mask-linear-position), var(--sf-mask-linear-from-color) var(--sf-mask-linear-from-position), var(--sf-mask-linear-to-color) var(--sf-mask-linear-to-position);
--sf-mask-linear: linear-gradient(var(--sf-mask-linear-stops));
--sf-mask-linear-to-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-from-<percentage>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-from-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-from-42%

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-from-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-from-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-from-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-from-[42%]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-from-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-from-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-from-(--my-percentage)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-from-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-from-(percentage:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-from-(percentage:--my-percentage)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-from-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-to-<percentage>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-to-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-to-42%

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-to-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-to-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-to-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-to-[42%]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-to-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-to-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-to-(--my-percentage)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-to-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-to-(percentage:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-t-to-(percentage:--my-percentage)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-to-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-from-<percentage>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-from-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-from-42%

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-from-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-from-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-from-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-from-[42%]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-from-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-from-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-from-(--my-percentage)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-from-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-from-(percentage:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-from-(percentage:--my-percentage)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-from-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-to-<percentage>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-to-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-to-42%

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-to-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-to-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-to-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-to-[42%]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-to-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-to-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-to-(--my-percentage)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-to-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-to-(percentage:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-r-to-(percentage:--my-percentage)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-to-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect;

mask-b-from-<percentage>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-from-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-from-42%

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-from-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-from-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-from-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-from-[42%]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-from-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-from-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-from-(--my-percentage)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-from-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-from-(percentage:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-from-(percentage:--my-percentage)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-from-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-to-<percentage>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-to-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-to-42%

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-to-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-to-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-to-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-to-[42%]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-to-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-to-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-to-(--my-percentage)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-to-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-to-(percentage:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-b-to-(percentage:--my-percentage)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-to-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-from-<percentage>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-from-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-from-42%

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-from-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-from-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-from-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-from-[42%]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-from-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-from-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-from-(--my-percentage)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-from-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-from-(percentage:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-from-(percentage:--my-percentage)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-from-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-to-<percentage>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-to-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-to-42%

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-to-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-to-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-to-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-to-[42%]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-to-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-to-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-to-(--my-percentage)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-to-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-to-(percentage:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-l-to-(percentage:--my-percentage)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-to-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-from-<percentage>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-from-position: <percentage>;
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-from-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-from-42%

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-from-position: 42%;
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-from-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-from-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-from-position: <value>;
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-from-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-from-[42%]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-from-position: 42%;
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-from-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-from-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-from-position: var(<custom-property>);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-from-(--my-percentage)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-from-position: var(--my-percentage);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-from-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-from-(percentage:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-from-position: var(<custom-property>);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-from-(percentage:--my-percentage)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-from-position: var(--my-percentage);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-from-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-to-<percentage>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-to-position: <percentage>;
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-to-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-to-42%

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-to-position: 42%;
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-to-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-to-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-to-position: <value>;
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-to-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-to-[42%]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-to-position: 42%;
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-to-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-to-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-to-position: var(<custom-property>);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-to-(--my-percentage)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-to-position: var(--my-percentage);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-to-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-to-(percentage:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));/* black, 0%, transparent, 100% */
--sf-mask-top-to-position: var(<custom-property>);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));/* black, 0%, transparent, 100% */
--sf-mask-bottom-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-y-to-(percentage:--my-percentage)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-top: linear-gradient(to top, var(--sf-mask-top-from-color) var(--sf-mask-top-from-position), var(--sf-mask-top-to-color) var(--sf-mask-top-to-position));
--sf-mask-top-to-position: var(--my-percentage);
--sf-mask-bottom: linear-gradient(to bottom, var(--sf-mask-bottom-from-color) var(--sf-mask-bottom-from-position), var(--sf-mask-bottom-to-color) var(--sf-mask-bottom-to-position));
--sf-mask-bottom-to-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-from-<percentage>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-from-position: <percentage>;
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-from-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-from-42%

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-from-position: 42%;
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-from-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-from-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-from-position: <value>;
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-from-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-from-[42%]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-from-position: 42%;
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-from-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-from-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-from-position: var(<custom-property>);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-from-(--my-percentage)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-from-position: var(--my-percentage);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-from-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-from-(percentage:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-from-position: var(<custom-property>);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-from-(percentage:--my-percentage)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-from-position: var(--my-percentage);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-from-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-to-<percentage>

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-to-position: <percentage>;
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-to-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-to-42%

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-to-position: 42%;
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-to-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-to-[<value>]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-to-position: <value>;
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-to-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-to-[42%]

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-to-position: 42%;
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-to-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-to-(<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-to-position: var(<custom-property>);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-to-(--my-percentage)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-to-position: var(--my-percentage);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-to-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-to-(percentage:<custom-property>)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));/* black, 0%, transparent, 100% */
--sf-mask-right-to-position: var(<custom-property>);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));/* black, 0%, transparent, 100% */
--sf-mask-left-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-x-to-(percentage:--my-percentage)

--sf-mask-linear: var(--sf-mask-left), var(--sf-mask-right), var(--sf-mask-bottom), var(--sf-mask-top);
--sf-mask-right: linear-gradient(to right, var(--sf-mask-right-from-color) var(--sf-mask-right-from-position), var(--sf-mask-right-to-color) var(--sf-mask-right-to-position));
--sf-mask-right-to-position: var(--my-percentage);
--sf-mask-left: linear-gradient(to left, var(--sf-mask-left-from-color) var(--sf-mask-left-from-position), var(--sf-mask-left-to-color) var(--sf-mask-left-to-position));
--sf-mask-left-to-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-from-<percentage>

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);/* ellipse, farthest-corner, center, black, 0%, transparent, 100% */
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-from-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-from-42%

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-from-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-from-[<value>]

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);/* ellipse, farthest-corner, center, black, 0%, transparent, 100% */
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-from-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-from-[42%]

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-from-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-from-(<custom-property>)

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);/* ellipse, farthest-corner, center, black, 0%, transparent, 100% */
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-from-(--my-percentage)

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-from-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-from-(percentage:<custom-property>)

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);/* ellipse, farthest-corner, center, black, 0%, transparent, 100% */
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-from-(percentage:--my-percentage)

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-from-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-to-<percentage>

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);/* ellipse, farthest-corner, center, black, 0%, transparent, 100% */
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-to-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-to-42%

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-to-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-to-[<value>]

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);/* ellipse, farthest-corner, center, black, 0%, transparent, 100% */
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-to-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-to-[42%]

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-to-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-to-(<custom-property>)

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);/* ellipse, farthest-corner, center, black, 0%, transparent, 100% */
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-to-(--my-percentage)

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-to-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-to-(percentage:<custom-property>)

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);/* ellipse, farthest-corner, center, black, 0%, transparent, 100% */
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-radial-to-(percentage:--my-percentage)

--sf-mask-radial-stops: var(--sf-mask-radial-shape) var(--sf-mask-radial-size) at var(--sf-mask-radial-position), var(--sf-mask-radial-from-color) var(--sf-mask-radial-from-position), var(--sf-mask-radial-to-color) var(--sf-mask-radial-to-position);
--sf-mask-radial: radial-gradient(var(--sf-mask-radial-stops));
--sf-mask-radial-to-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-from-<percentage>

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-from-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-from-42%

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-from-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-from-[<value>]

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-from-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-from-[42%]

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-from-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-from-(<custom-property>)

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-from-(--my-percentage)

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-from-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-from-(percentage:<custom-property>)

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-from-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-from-(percentage:--my-percentage)

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-from-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-to-<percentage>

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-to-position: <percentage>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-to-42%

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-to-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-to-[<value>]

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-to-position: <value>;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-to-[42%]

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-to-position: 42%;

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-to-(<custom-property>)

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-to-(--my-percentage)

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-to-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-to-(percentage:<custom-property>)

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);/* 0deg, black, 0%, transparent, 100% */
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-to-position: var(<custom-property>);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);/* linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) */

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-conic-to-(percentage:--my-percentage)

--sf-mask-conic-stops: from var(--sf-mask-conic-position), var(--sf-mask-conic-from-color) var(--sf-mask-conic-from-position), var(--sf-mask-conic-to-color) var(--sf-mask-conic-to-position);
--sf-mask-conic: conic-gradient(var(--sf-mask-conic-stops));
--sf-mask-conic-to-position: var(--my-percentage);

-webkit-mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);
mask-image: var(--sf-mask-linear), var(--sf-mask-radial), var(--sf-mask-conic);

-webkit-mask-composite: source-in;
mask-composite: intersect

mask-composite

mask-mode

Effects

mask-image

Quick reference

Mask

Mask Color

Mask Dimension Length

Mask Image

Mask Percentage

Sfumato

Community