utilities/mask-image

59 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

mask-[<value>] arbitrary mask image utility

The mask-[<value>] utility class sets mask-image: <value> to apply a custom mask image to an element. Use this syntax to specify any valid CSS mask-image value, such as URL references to image files or inline SVG.

mask-(<custom-property>) custom property mask utility

The mask-(<custom-property>) utility class sets mask-image: var(<custom-property>) to apply a mask image from a custom CSS property variable.

mask-none removes mask image

The mask-none utility class sets mask-image: none to remove any existing mask image from an element.

mask-linear-<number> angled linear gradient mask

The mask-linear-<number> utility class creates a linear gradient mask at <number> degrees. It sets mask-image: linear-gradient(<number>deg, black var(--tw-mask-linear-from)), transparent var(--tw-mask-linear-to)). Use -mask-linear-<number> to negate the angle.

mask-linear-from-<color> linear mask gradient from color

The mask-linear-from-<color> utility class sets the starting color of a linear gradient mask. It sets mask-image: linear-gradient(var(--tw-mask-linear-position), <color> var(--tw-mask-linear-from), transparent var(--tw-mask-linear-to)).

mask-linear-to-<number> linear mask gradient to point with spacing

The mask-linear-to-<number> utility class sets the ending point of a linear gradient mask using spacing scale multiplier. It sets mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent calc(var(--spacing) * <number>)).

mask-linear-to-<percentage> linear mask gradient to point with percentage

The mask-linear-to-<percentage> utility class sets the ending point of a linear gradient mask using a percentage value. It sets mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent <percentage>).

mask-linear-to-<color> linear mask gradient to color

The mask-linear-to-<color> utility class sets the ending color of a linear gradient mask. It sets mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), <color> var(--tw-mask-linear-to)).

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

The mask-linear-to-(<custom-property>) utility class references a custom CSS property for the ending point of a linear gradient mask. It sets mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent var(<custom-property>)).

mask-linear-to-[<value>] linear mask gradient to arbitrary value

The mask-linear-to-[<value>] utility class sets the ending point of a linear gradient mask to an arbitrary CSS value. It sets mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent <value>).

mask-t-to-<number> top edge linear mask to spacing

The mask-t-to-<number> utility class applies a linear gradient mask to the top edge ending at a point defined by spacing scale multiplier. It sets mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent calc(var(--spacing) * <number>)).

mask-t-to-<percentage> top edge linear mask to percentage

The mask-t-to-<percentage> utility class applies a linear gradient mask to the top edge ending at a percentage point. It sets mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent <percentage>).

mask-t-to-<color> top edge linear mask to color

The mask-t-to-<color> utility class applies a linear gradient mask to the top edge with an ending color. It sets mask-image: linear-gradient(to top, black var(--tw-mask-top-from), <color> var(--tw-mask-top-to)).

mask-t-to-(<custom-property>) top edge linear mask to custom property

The mask-t-to-(<custom-property>) utility class applies a linear gradient mask to the top edge using a custom CSS property for the ending point. It sets mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent var(<custom-property>)).

mask-t-to-[<value>] top edge linear mask to arbitrary value

The mask-t-to-[<value>] utility class applies a linear gradient mask to the top edge using an arbitrary CSS value for the ending point. It sets mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent <value>).

mask-r-to-<color> right edge linear mask to color

The mask-r-to-<color> utility class applies a linear gradient mask to the right edge with an ending color. It sets mask-image: linear-gradient(to right, black var(--tw-mask-right-from), <color> var(--tw-mask-right-to)).

mask-r-to-(<custom-property>) right edge linear mask to custom property

The mask-r-to-(<custom-property>) utility class applies a linear gradient mask to the right edge using a custom CSS property for the ending point. It sets mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent var(<custom-property>)).

mask-r-to-[<value>] right edge linear mask to arbitrary value

The mask-r-to-[<value>] utility class applies a linear gradient mask to the right edge using an arbitrary CSS value for the ending point. It sets mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent <value>).

mask-b-to-<number> bottom edge linear mask to spacing

The mask-b-to-<number> utility class applies a linear gradient mask to the bottom edge ending at a point defined by spacing scale multiplier. It sets mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent calc(var(--spacing) * <number>)).

mask-b-to-<percentage> bottom edge linear mask to percentage

The mask-b-to-<percentage> utility class applies a linear gradient mask to the bottom edge ending at a percentage point. It sets mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent <percentage>).

mask-b-to-<color> bottom edge linear mask to color

The mask-b-to-<color> utility class applies a linear gradient mask to the bottom edge with an ending color. It sets mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), <color> var(--tw-mask-bottom-to)).

mask-b-to-(<custom-property>) bottom edge linear mask to custom property

The mask-b-to-(<custom-property>) utility class applies a linear gradient mask to the bottom edge using a custom CSS property for the ending point. It sets mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent var(<custom-property>)).

mask-b-to-[<value>] bottom edge linear mask to arbitrary value

The mask-b-to-[<value>] utility class applies a linear gradient mask to the bottom edge using an arbitrary CSS value for the ending point. It sets mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent <value>).

mask-l-to-<number> left edge linear mask to spacing

The mask-l-to-<number> utility class applies a linear gradient mask to the left edge ending at a point defined by spacing scale multiplier. It sets mask-image: linear-gradient(to left, black var(--tw-mask-left-from), transparent calc(var(--spacing) * <number>)).

mask-l-to-<percentage> left edge linear mask to percentage

The mask-l-to-<percentage> utility class applies a linear gradient mask to the left edge ending at a percentage point. It sets mask-image: linear-gradient(to bottom, black var(--tw-mask-left-from), transparent <percentage>). Note: The CSS generated uses 'to bottom' direction instead of 'to left'.

mask-l-to-<color> left edge linear mask to color

The mask-l-to-<color> utility class applies a linear gradient mask to the left edge with an ending color. It sets mask-image: linear-gradient(to bottom, black var(--tw-mask-left-from), <color> var(--tw-mask-left-to)). Note: The CSS generated uses 'to bottom' direction instead of 'to left'.

mask-l-to-(<custom-property>) left edge linear mask to custom property

The mask-l-to-(<custom-property>) utility class applies a linear gradient mask to the left edge using a custom CSS property for the ending point. It sets mask-image: linear-gradient(to left, black var(--tw-mask-left-from), transparent var(<custom-property>)).

mask-l-to-[<value>] left edge linear mask to arbitrary value

The mask-l-to-[<value>] utility class applies a linear gradient mask to the left edge using an arbitrary CSS value for the ending point. It sets mask-image: linear-gradient(to left, black var(--tw-mask-left-from), transparent <value>).

mask-y-to-<percentage> vertical edges linear mask to percentage with intersect

The mask-y-to-<percentage> utility class applies linear gradient masks to both top and bottom edges ending at a percentage point. It sets two mask-image gradients (both to bottom) with mask-composite: intersect to combine them.

mask-y-to-<color> vertical edges linear mask to color with intersect

The mask-y-to-<color> utility class applies linear gradient masks to both top and bottom edges with an ending color. It sets two mask-image gradients (both to bottom) with mask-composite: intersect to combine them.

mask-y-to-(<custom-property>) vertical edges linear mask to custom property with intersect

The mask-y-to-(<custom-property>) utility class applies linear gradient masks to both top and bottom edges using a custom CSS property for the ending point. It sets two mask-image gradients with mask-composite: intersect to combine them.

mask-y-to-[<value>] vertical edges linear mask to arbitrary value with intersect

The mask-y-to-[<value>] utility class applies linear gradient masks to both top and bottom edges using an arbitrary CSS value for the ending point. It sets two mask-image gradients with mask-composite: intersect to combine them.

mask-x-to-<number> horizontal edges linear mask to spacing with intersect

The mask-x-to-<number> utility class applies linear gradient masks to both left and right edges ending at a point defined by spacing scale multiplier. It sets two mask-image gradients with mask-composite: intersect to combine them.

mask-x-to-<percentage> horizontal edges linear mask to percentage with intersect

The mask-x-to-<percentage> utility class applies linear gradient masks to both left and right edges ending at a percentage point. It sets two mask-image gradients (both to left) with mask-composite: intersect to combine them.

mask-x-to-<color> horizontal edges linear mask to color with intersect

The mask-x-to-<color> utility class applies linear gradient masks to both left and right edges with an ending color. It sets two mask-image gradients (both to left) with mask-composite: intersect to combine them.

mask-x-to-(<custom-property>) horizontal edges linear mask to custom property with intersect

The mask-x-to-(<custom-property>) utility class applies linear gradient masks to both left and right edges using a custom CSS property for the ending point. It sets two mask-image gradients with mask-composite: intersect to combine them.

mask-x-to-[<value>] horizontal edges linear mask to arbitrary value with intersect

The mask-x-to-[<value>] utility class applies linear gradient masks to both left and right edges using an arbitrary CSS value for the ending point. It sets two mask-image gradients with mask-composite: intersect to combine them.

mask-radial-[<value>] arbitrary radial gradient mask

The mask-radial-[<value>] utility class sets mask-image: radial-gradient(<value>) to apply a custom radial gradient mask to an element.

mask-radial-[<size>_<size>] radial mask size two axes

The mask-radial-[<size>_<size>] utility class sets --tw-mask-radial-size: <size> <size> to define the size of a radial gradient mask on both axes.

mask-radial-to-<number> radial gradient mask to spacing

The mask-radial-to-<number> utility class sets the ending point of a radial gradient mask using spacing scale multiplier. It sets mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(--tw-mask-radial-from), transparent calc(var(--spacing) * <number>)).

mask-radial-to-<percentage> radial gradient mask to percentage

The mask-radial-to-<percentage> utility class sets the ending point of a radial gradient mask using a percentage value. It sets mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(--tw-mask-radial-from), transparent <percentage>).

mask-radial-to-<color> radial gradient mask to color

The mask-radial-to-<color> utility class sets the ending color of a radial gradient mask. It sets mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(--tw-mask-radial-from), <color> var(--tw-mask-radial-to)).

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

The mask-radial-to-(<custom-property>) utility class sets the ending point of a radial gradient mask using a custom CSS property. It sets mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(--tw-mask-radial-from), transparent var(<custom-property>)).

mask-radial-to-[<value>] radial gradient mask to arbitrary value

The mask-radial-to-[<value>] utility class sets the ending point of a radial gradient mask to an arbitrary CSS value. It sets mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(--tw-mask-radial-from), transparent <value>).

mask-circle radial mask shape circle

The mask-circle utility class sets --tw-mask-radial-shape: circle to make radial gradient masks circular in shape.

mask-ellipse radial mask shape ellipse

The mask-ellipse utility class sets --tw-mask-radial-shape: ellipse to make radial gradient masks elliptical in shape.

mask-radial-farthest-corner radial mask size farthest-corner

The mask-radial-farthest-corner utility class sets --tw-mask-radial-size: farthest-corner to make the radial gradient mask extend to the farthest corner.

mask-radial-farthest-side radial mask size farthest-side

The mask-radial-farthest-side utility class sets --tw-mask-radial-size: farthest-side to make the radial gradient mask extend to the farthest side.

mask-radial-at-top-right radial mask position top right

The mask-radial-at-top-right utility class sets --tw-mask-radial-position: top right to position the center of a radial gradient mask at the top-right corner.

mask-radial-at-center radial mask position center

The mask-radial-at-center utility class sets --tw-mask-radial-position: center to position the center of a radial gradient mask at the center of the element.

mask-radial-at-right radial mask position right

The mask-radial-at-right utility class sets --tw-mask-radial-position: right to position the center of a radial gradient mask at the right edge.

mask-radial-at-bottom-right radial mask position bottom right

The mask-radial-at-bottom-right utility class sets --tw-mask-radial-position: bottom right to position the center of a radial gradient mask at the bottom-right corner.

mask-conic-<number> conic gradient mask from angle

The mask-conic-<number> utility class creates a conic gradient mask starting at <number> degrees. It sets mask-image: conic-gradient(from <number>deg, black var(--tw-mask-conic-from), transparent var(--tw-mask-conic-to)). Use -mask-conic-<number> to negate the angle.

mask-conic-to-<number> conic mask gradient to spacing

The mask-conic-to-<number> utility class sets the ending point of a conic gradient mask using spacing scale multiplier. It sets mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), transparent calc(var(--spacing) * <number>)).

mask-conic-to-<percentage> conic mask gradient to percentage

The mask-conic-to-<percentage> utility class sets the ending point of a conic gradient mask using a percentage value. It sets mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), transparent <percentage>).

mask-conic-to-<color> conic mask gradient to color

The mask-conic-to-<color> utility class sets the ending color of a conic gradient mask. It sets mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), <color> var(--tw-mask-conic-to)).

mask-conic-to-(<custom-property>) conic mask gradient to custom property

The mask-conic-to-(<custom-property>) utility class sets the ending point of a conic gradient mask using a custom CSS property. It sets mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), transparent var(<custom-property>)).

mask-conic-to-[<value>] conic mask gradient to arbitrary value

The mask-conic-to-[<value>] utility class sets the ending point of a conic gradient mask to an arbitrary CSS value. It sets mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), transparent <value>).

Gradient mask utilities can be combined using mask-composite intersect

Multiple gradient mask utilities like mask-radial-from-<value>, mask-conic-to-<value>, and mask-l-from-<value> can be combined on a single element to create complex gradient masks. The mask-composite property is set to intersect by default to combine the gradients.

Give your agent this brain