Skip to content
Hover Tilt

Glare Masks

Glare masks let you constrain the animated highlight to specific shapes, such as; foil borders, emboss lines, or gradients. It is possible to pair masks with glareMaskMode and glareMaskComposite to emulate multi-layer trading-card finishes!

Applying a glare mask

Section titled “Applying a glare mask”

The steps to apply a glare mask are as follows;

  1. Export or create monochrome PNG/SVG assets representing the regions where the glare should appear.
  2. Reference those assets in the glareMask prop.
  3. Tune glareMaskMode (match-source, luminance, or alpha) so the browser interprets the mask correctly.

Basic Example

Section titled “Basic Example”

The card above demonstrates a basic example of applying a PNG mask to the glare effect.

Different Options

Section titled “Different Options”

CSS Alpha Repeating Gradient

Section titled “CSS Alpha Repeating Gradient”

Utilizing a CSS repeating-radial-gradient() as a mask, and applying glareMaskMode='alpha'.

Any css gradient can be used in this manner. You could also use a black & white gradient with glareMaskMode="luminance".

<HoverTilt
  class="mask-card"
  glareMask="repeating-radial-gradient(circle at 30% 30%, #fff, #fff 12px, #fff0 12px, #fff0 24px)"
  glareMaskMode="alpha"
>
  Your content here
</HoverTilt>

Black & White Bitmap

Section titled “Black & White Bitmap”

Using a black & white bitmap sourced from a local folder, with glareMaskMode="luminance".

Any image format would work here (webp, png, jpg, gif, etc.), and transparent images should be used with glareMaskMode="alpha".

<HoverTilt class="mask-card" glareMask="url(/aztec-pattern.webp)" glareMaskMode="luminance">
  Your content here
</HoverTilt>

Transparent SVG

Section titled “Transparent SVG”

Using a transparent SVG sourced from a local folder, with glareMaskMode="alpha".

Just like the locally sourced PNG, except the SVG has a transparent background and so we use glareMaskMode="alpha".

<HoverTilt class="mask-card" glareMask="url(/circuit-board.svg)" glareMaskMode="alpha">
  Your content here
</HoverTilt>

SVG url(#id)

Section titled “SVG url(#id)”

Using an SVG mask definition referenced by ID, with glareMaskMode="alpha".

Here we first define the mask in an inline SVG definition, and then reference it using url(#mask). See MDN’s guide on SVG masks for more information.

  <svg width="0" height="0" aria-hidden="true" focusable="false">
    <defs>
      <pattern id="pattern" patternUnits="userSpaceOnUse" width="24" height="24">
        <rect x="0" y="0" width="24" height="24" fill="transparent" />
        <polygon fill="white" fill-rule="evenodd" points="8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4" />
      </pattern>
      <mask id="mask">
        <rect x="0" y="0" width="500" height="500" fill="url(#pattern)"></rect>
      </mask>
    </defs>
  </svg>


  <HoverTilt class="mask-card" glareMask="url(#mask)" glareMaskMode="alpha">
    Your content here
  </HoverTilt>