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-to-t
mask-image: linear-gradient(to top, var(--tw-mask-gradient-stops));
mask-linear-to-tr
mask-image: linear-gradient(to top right, var(--tw-mask-gradient-stops));
mask-linear-to-r
mask-image: linear-gradient(to right, var(--tw-mask-gradient-stops));
mask-linear-to-br
mask-image: linear-gradient(to bottom right, var(--tw-mask-gradient-stops));
mask-linear-to-b
mask-image: linear-gradient(to bottom, var(--tw-mask-gradient-stops));
mask-linear-to-bl
mask-image: linear-gradient(to bottom left, var(--tw-mask-gradient-stops));
mask-linear-to-l
mask-image: linear-gradient(to left, var(--tw-mask-gradient-stops));

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-to-r and mask-linear-<angle> with the mask color stop utilities 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-to-b mask-from-white mask-from-70% ...">
    <table>
      <!-- ... -->
    </table>
  </div>
</div>

Adding a radial gradient mask

Use the mask-radial and mask-radial-[<position>] utilities with the mask color stop utilities to add a radial gradient mask to an element:

Tom Cook profile picture

Tom Cook

Director of Operations

<div class="flex items-center justify-center">
  <div class="relative">
    <img
      class="size-16 rounded-full mask-radial-[circle_at_85%_85%] mask-from-transparent mask-via-transparent mask-via-15% mask-to-white mask-to-15%"
      src="/img/tom_cook.jpg"
    />
    <div
      class="absolute right-1 bottom-1 size-3 rounded-full bg-emerald-400 ring inset-ring-1 ring-black/2.5 inset-ring-white/30"
    ></div>
  </div>
  <div class="ml-3 text-sm font-medium">
    <p class="text-gray-700 dark:text-gray-300">Tom Cook</p>
    <p class="text-gray-500">Director of Operations</p>
  </div>
</div>

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 mask-from-white mask-via-white mask-via-75% mask-to-transparent mask-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>

Setting mask color stops

Use utilities like mask-from-white, mask-via-transparent, and mask-to-black to set the colors of the mask gradient stops:

<div
  class="bg-[url(/img/mountains.jpg)] mask-linear-to-r mask-from-white mask-via-white/70 mask-to-transparent ..."
></div>

Although you can specify any color value for the mask stops, the visibility of a stop depends on the mask-mode property.

When using mask-mode: luminance, the luminance value of the color stop determines visibility, so sticking with grayscale colors will produce the most predictable results. With mask-mode: alpha, the opacity of the color stop determines the visibility of the masked element.

Setting mask stop positions

Use utilities like mask-from-10%, mask-via-30%, and mask-to-90% to set more precise positions for the mask gradient color stops:

10%
30%
90%
<div
  class="bg-[url(/img/mountains.jpg)] mask-linear-to-r mask-from-white mask-from-10% mask-via-white/70 mask-via-30% mask-to-transparent mask-to-90% ..."
></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-from-[<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-from-70% md:mask-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-from-regal-blue,mask-via-regal-blue, and mask-to-regal-blue can be used in your markup:

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

Learn more about customizing your theme in the theme documentation.

On this page

Copyright © 2025 Tailwind Labs Inc.·Trademark Policy