DocsBlogShowcasePlus
  1. Effects
  2. mask-image

Effects

mask-image

Utilities for controlling an element's mask image.

ClassStyles
mask-[<value>]
mask-image: <value>;
mask-(image:<custom-property>)
mask-image: var(<custom-property>);
mask-none
mask-image: none;
mask-linear-<number>
mask-image: linear-gradient(<number>deg, black var(--tw-mask-linear-from)), transparent var(--tw-mask-linear-to));
-mask-linear-<number>
mask-image: linear-gradient(calc(<number>deg * -1), black var(--tw-mask-linear-from)), transparent var(--tw-mask-linear-to));
mask-linear-from-<number>
mask-image: linear-gradient(var(--tw-mask-linear-position), black calc(var(--spacing * <number>)), transparent var(--tw-mask-linear-to));
mask-linear-from-<percentage>
mask-image: linear-gradient(var(--tw-mask-linear-position), black <percentage>, transparent var(--tw-mask-linear-to));
mask-linear-from-<color>
mask-image: linear-gradient(var(--tw-mask-linear-position), <color> var(--tw-mask-linear-from), transparent var(--tw-mask-linear-to));
mask-linear-from-(<custom-property>)
mask-image: linear-gradient(var(--tw-mask-linear-position), black <custom-property>, transparent var(--tw-mask-linear-to));
mask-linear-from-[<value>]
mask-image: linear-gradient(var(--tw-mask-linear-position), black <value>, transparent var(--tw-mask-linear-to));

Examples

Basic example

Use the mask-[<value>] syntax to set the mask image of an element:

<div class="bg-[url(/img/mountains.jpg)] mask-[url(/img/scribble.png)] ..."></div>

Adding a linear gradient mask

Use utilities like mask-linear-<angle> and mask-linear-to-<value> to add a linear gradient mask to an element:

NameTitleEmail
Jane CooperRegional Paradigm Technicianjane.cooper@example.com
Cody FisherProduct Directives Officercody.fisher@example.com
Leonard KrasnerSenior Designerleonard.krasner@example.com
Emily SelmanVP, Hardware Engineeringemily.selman@example.com
Anna RobertsChief Strategy Officeranna.roberts@example.com
<div class="relative">
  <div class="absolute inset-x-0 bottom-8 z-10 flex items-center justify-center">
    <button
      type="button"
      class="rounded-full bg-white px-4 py-2 text-sm font-semibold text-gray-900 dark:bg-gray-950 dark:text-white dark:ring-white/20 dark:hover:bg-gray-900 ..."
    >
      Show more
    </button>
  </div>
  <div class="max-h-96 mask-linear-180 mask-linear-from-70% ...">
    <table>
      <!-- ... -->
    </table>
  </div>
</div>

Masking a single side:

Use utilities like mask-b-from-<value> and mask-t-to-<value> as a short hand for adding a linear gradient mask to a single side of an element:

mask-t-from-50%

mask-t-to-90%

mask-r-from-50%

mask-r-to-90%

mask-b-from-50%

mask-b-to-90%

mask-l-from-50%

mask-l-to-90%

<div class="mask-t-from-50% mask-t-to-90% ..."></div>
<div class="mask-r-from-50% mask-r-to-90% ..."></div>
<div class="mask-b-from-50% mask-b-to-90% ..."></div>
<div class="mask-l-from-50% mask-l-to-90% ..."></div>

You can combine multiple single side utilities to create more complex gradients:

<div class="mask-r-from-70% mask-l-from-80% mask-l-to-90% ..."></div>

Creating symmetrical linear gradients

Use utilities like mask-x-from-<value> and mask-y-from-<value> to create symmetrical linear gradients:

<div class="bg-[url(/img/mountains.jpg)] mask-x-from-70% mask-x-to-90% ..."></div>

This is just a shorthand for combining two single side gradients with the same stop values.

Adding a radial gradient mask

Use the mask-radial-from-<value> and mask-radial-to-<value> utilities to add a radial gradient mask to an element:

Speed

Built for power users

Work faster than ever with customizable keyboard shortcuts

<div class="flex items-center gap-4">
  <img class="mask-radial-[100%_100%] mask-radial-from-75% mask-radial-at-left ..." src="/img/keyboard.png" />
  <div class="font-medium">
    <p className="font-mono text-xs text-blue-500 uppercase dark:text-blue-400">Speed</p>
    <p className="mt-2 text-base text-gray-700 dark:text-gray-300">Built for power users</p>
    <p className="mt-1 text-sm leading-relaxed text-balance text-gray-500">
      Work faster than ever with customizable keyboard shortcuts
    </p>
  </div>
</div>

Setting the radial gradient position

Use utilities like mask-radial-at-bottom-left and mask-radial-at-[35%_35%] to set the position of the center of the radial gradient mask:

mask-radial-at-top-left

mask-radial-at-top

mask-radial-at-top-right

mask-radial-at-left

mask-radial-at-center

mask-radial-at-right

mask-radial-at-bottom-left

mask-radial-at-bottom

mask-radial-at-bottom-right

<div class="mask-radial-from-100% mask-radial-at-top-left ..."></div>
<div class="mask-radial-from-100% mask-radial-at-top ..."></div>
<div class="mask-radial-from-100% mask-radial-at-top-right ..."></div>
<div class="mask-radial-from-100% mask-radial-at-left ..."></div>
<div class="mask-radial-at-center mask-radial-from-100% ..."></div>
<div class="mask-radial-from-100% mask-radial-at-right ..."></div>
<div class="mask-radial-from-100% mask-radial-at-bottom-left ..."></div>
<div class="mask-radial-from-100% mask-radial-at-bottom ..."></div>
<div class="mask-radial-from-100% mask-radial-at-bottom-right ..."></div>

This is different from mask-position which sets the position of the mask image itself, not the radial gradient.

Setting the radial gradient size

Use utilities like mask-radial-closest-corner and mask-radial-farthest-side to set the size of the radial gradient mask:

mask-radial-closest-side

mask-radial-closest-corner

mask-radial-farthest-side

mask-radial-farthest-corner

<div class="mask-radial-from-100% mask-radial-closest-side mask-radial-at-[30%_30%] ..."></div>
<div class="mask-radial-from-100% mask-radial-closest-corner mask-radial-at-[30%_30%] ..."></div>
<div class="mask-radial-from-100% mask-radial-farthest-side mask-radial-at-[30%_30%] ..."></div>
<div class="mask-radial-from-100% mask-radial-farthest-corner mask-radial-at-[30%_30%] ..."></div>

When setting a custom radial gradient size, the units you can use depend on the <ending-shape> of the gradient which is set to ellipse by default.

With mask-circle, you can only use a single fixed length, like mask-radial-[5rem]. Whereas with mask-ellipse, you can specify each axis as a fixed length or percentage, like mask-radial-[40%_80%].

Adding a conic gradient mask

Use the mask-conic and mask-conic-<angle> utilities with the mask color stop utilities to add a conic gradient mask to an element:

Storage used: 75%

0.48 GB out of 2 GB remaining

<div class="flex items-center gap-5 rounded-xl bg-white p-4 shadow-lg ring-1 ring-black/5 dark:bg-gray-800">
  <div class="grid grid-cols-1 grid-rows-1">
    <div class="border-4 border-gray-100 dark:border-gray-700 ..."></div>
    <div class="border-4 border-amber-500 mask-conic-from-75% mask-conic-to-75% dark:border-amber-400 ..."></div>
  </div>
  <div class="w-0 flex-1 text-sm text-gray-950 dark:text-white">
    <p class="font-medium">Storage used: 75%</p>
    <p class="mt-1 text-gray-500 dark:text-gray-400"><span class="font-medium">0.48 GB</span> out of 2 GB remaining</p>
  </div>
</div>

Removing mask images

Use the mask-none utility to remove an existing mask image from an element:

<div class="mask-none"></div>

Using a custom value

Use utilities like mask-linear-[<value>] and mask-radial-[<value>] to set the mask image based on a completely custom value:

<div class="mask-linear-[25deg,red_5%,yellow_60%,lime_90%,teal] ...">
  <!-- ... -->
</div>

For CSS variables, you can also use the mask-linear-(<custom-property>) syntax:

<div class="mask-linear-(--my-mask) ...">
  <!-- ... -->
</div>

This is just a shorthand for mask-linear-[var(<custom-property>)] that adds the var() function for you automatically.

Responsive design

Prefix a mask-image utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<div class="mask-radial-from-70% md:mask-radial-from-50% ...">
  <!-- ... -->
</div>

Learn more about using variants in the variants documentation.

Customizing your theme

Use the --color-* theme variables to customize the color utilities in your project:

@theme {
  --color-regal-blue: #243c5a; 
}

Now utilities like mask-radial-from-regal-blue,mask-conic-to-regal-blue, and mask-b-from-regal-blue can be used in your markup:

<div class="mask-radial-from-regal-blue">
  <!-- ... -->
</div>

Learn more about customizing your theme in the theme documentation.

On this page

Copyright © 2025 Tailwind Labs Inc.·Trademark Policy