Text Mask

<quiet-text-mask>

stable

since 1.0.0

Text masks apply text as a mask over an image, creating visually stylized characters.

Text masks create eye-catching headlines that capture visitors' attention, making them great for landing pages. For best results, use a font with a heavy weight, e.g. 700+ or bold/black variants, as thicker letter forms provide more surface area for the image to show through.

              
                LOVE WHAT
                YOU CREATE

<quiet-text-mask 
  image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?q=80&w=1400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
  fixed
  style="
    font-family: 'Fira Sans', sans-serif;
    font-size: 7em; 
    font-weight: 900; 
    line-height: 1; 
    text-align: center;
    --brightness: 90%;
    --contrast: 60%;
  "
>
  <quiet-fit-text>LOVE WHAT</quiet-fit-text>
  <quiet-fit-text>YOU CREATE</quiet-fit-text>
</quiet-text-mask>

If you're using light and dark color schemes, ensure the text has sufficient contrast for both by selecting images with high color variation or adjusting the brightness/contrast to ensure readability regardless of the background.

Examples Jump to heading

Providing text Jump to heading

All text inside the text mask will be masked. The font, size, weight, etc. is inherited, meaning you can provide them on the text mask or an ancestor element.

Joy & Mystery

Whether lounging in a sunbeam or chasing invisible prey, cats bring joy and mystery to our homes.

<quiet-text-mask 
  image="https://images.unsplash.com/photo-1566847438217-76e82d383f84?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
  style="
    font-family: 'Fira Sans', sans-serif;
    font-size: 2rem; 
    font-weight: 900; 
    line-height: 1.5; 
    text-transform: uppercase;
  "
>
  <h4 style="font: inherit; font-size: 3rem;">Joy &amp; Mystery</h4>
  <p>Whether lounging in a sunbeam or chasing invisible prey, cats bring joy and mystery to our homes.</p>
</quiet-text-mask>

Most text decorations, such as underlines and text shadows, will not work as expected inside text masks.

Fitting text Jump to heading

Use the fit text component to draw a text mask that fits the full width of its container without wrapping.

LOVE WHAT YOU CREATE

<quiet-text-mask 
  image="https://images.unsplash.com/photo-1527416876370-fb74d128c3dc?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
  style="
    font-family: 'Fira Sans', sans-serif;
    font-size: 4em; 
    font-weight: 900; 
    line-height: 1; 
    text-align: center;
    --brightness: 90%;
    --contrast: 60%;
  "
>
  <quiet-fit-text>
    LOVE WHAT YOU CREATE
  </quiet-fit-text>
</quiet-text-mask>

Repeating patterns Jump to heading

For a tiled background, use a repeating image and set background-repeat and background-size to the appropriate values in your CSS.

              
                PATTERNS

                REPEAT

                FOREVER

<quiet-text-mask 
  image="/assets/images/purple-tile.webp"
  style="
    font-family: 'Fira Sans', sans-serif;
    font-size: 4em; 
    font-weight: 900;
    text-align: center;
    line-height: 1;
    background-repeat: repeat;
    background-size: 140px;
  "
>
  PATTERNS<br>
  REPEAT<br>
  FOREVER
</quiet-text-mask>

Fixed backgrounds Jump to heading

Use the fixed attribute to create a parallax-like effect where the image stays fixed while scrolling. Not supported in iOS Safari.

FIXED BACKGROUND

<quiet-text-mask 
  image="https://images.unsplash.com/photo-1527416876370-fb74d128c3dc?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
  fixed
  style="
    font-family: 'Fira Sans', sans-serif;
    font-size: 4em; 
    font-weight: 900;
    text-align: center;
    --brightness: 90%;
    --contrast: 60%;
  "
>
  <quiet-fit-text>FIXED BACKGROUND</quiet-fit-text>
</quiet-text-mask>

Due to a very old bug, this feature is disabled in Firefox. If you'd like to see this fixed, consider logging in and voting for the bug.

Brightness Jump to heading

Adjust the brightness of the masked image using the --brightness custom property (0-200%). Normal brightness is 100%. Values below 100% darken the image, and values above 100% brighten it.

BRIGHTNESS

<div id="mask__brightness">
  <quiet-text-mask
    image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?q=80&w=1400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    style="
      font-family: 'Fira Sans', sans-serif;
      font-size: 4em;
      font-weight: 900;
      text-align: center;
      --brightness: 75%;
    "
  >
    <quiet-fit-text>BRIGHTNESS</quiet-fit-text>
  </quiet-text-mask>

  <quiet-slider 
    label="Brightness" 
    min="0" 
    max="200" 
    value="75" 
    indicator-offset="100"
    with-tooltip 
    class="quiet-vh-label"
  ></quiet-slider>
</div>

<script>
  const container = document.getElementById('mask__brightness');
  const mask = container.querySelector('quiet-text-mask');
  const slider = container.querySelector('quiet-slider');

  slider.addEventListener('quiet-input', () => {
    mask.style.setProperty('--brightness', `${slider.value}%`);
  });
</script>

Contrast Jump to heading

Control the contrast of the masked image with the --contrast custom property (0-200%). Normal contrast is 100%. Lower values reduce contrast for a more subtle effect, while higher values increase it for more dramatic definition in the text mask.

CONTRAST

<div id="mask__contrast">
  <quiet-text-mask
    image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?q=80&w=1400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    style="
      font-family: 'Fira Sans', sans-serif;
      font-size: 4em;
      font-weight: 900;
      text-align: center;
      --contrast: 50%;
    "
  >
    <quiet-fit-text>CONTRAST</quiet-fit-text>
  </quiet-text-mask>

  <quiet-slider 
    label="Contrast" 
    min="0" 
    max="200" 
    value="50" 
    indicator-offset="100"
    with-tooltip 
    class="quiet-vh-label"
  ></quiet-slider>
</div>

<script>
  const container = document.getElementById('mask__contrast');
  const mask = container.querySelector('quiet-text-mask');
  const slider = container.querySelector('quiet-slider');

  slider.addEventListener('quiet-input', () => {
    mask.style.setProperty('--contrast', `${slider.value}%`);
  });
</script>

Grayscale Jump to heading

Remove color from the masked image using the --grayscale custom property (0-100%). A value of 100% creates a completely black and white effect, while lower values retain some of the original color.

GRAYSCALE

<div id="mask__grayscale">
  <quiet-text-mask
    image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?q=80&w=1400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    style="
      font-family: 'Fira Sans', sans-serif;
      font-size: 4em;
      font-weight: 900;
      text-align: center;
      --grayscale: 100%;
    "
  >
    <quiet-fit-text>GRAYSCALE</quiet-fit-text>
  </quiet-text-mask>

  <quiet-slider 
    label="Grayscale" 
    min="0" 
    max="100" 
    value="100" 
    with-tooltip 
    class="quiet-vh-label"
  ></quiet-slider>
</div>

<script>
  const container = document.getElementById('mask__grayscale');
  const mask = container.querySelector('quiet-text-mask');
  const slider = container.querySelector('quiet-slider');

  slider.addEventListener('quiet-input', () => {
    mask.style.setProperty('--grayscale', `${slider.value}%`);
  });
</script>

Hue rotation Jump to heading

Transform the colors of the masked image with the --hue-rotate custom property (0-360deg). Values represent degrees of rotation around the color wheel, creating unique color shifts while maintaining the original luminosity.

HUE ROTATE

<div id="mask__hue">
  <quiet-text-mask
    image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?q=80&w=1400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    style="
      font-family: 'Fira Sans', sans-serif;
      font-size: 4em;
      font-weight: 900;
      text-align: center;
      --hue-rotate: 180deg;
    "
  >
    <quiet-fit-text>HUE ROTATE</quiet-fit-text>
  </quiet-text-mask>

  <quiet-slider 
    label="Hue Rotation" 
    min="0" 
    max="360" 
    value="180" 
    with-tooltip 
    class="quiet-vh-label"
  ></quiet-slider>
</div>

<script>
  const container = document.getElementById('mask__hue');
  const mask = container.querySelector('quiet-text-mask');
  const slider = container.querySelector('quiet-slider');
  const formatter = new Intl.NumberFormat('en-US', { style: 'unit', unit: 'degree', unitDisplay: 'narrow' });

  // Format the slider's tooltip as an angle
  customElements.whenDefined('quiet-slider').then(() => {
    slider.valueFormatter = value => formatter.format(value);
  });

  // Change with the slider
  slider.addEventListener('quiet-input', () => {
    mask.style.setProperty('--hue-rotate', `${slider.value}deg`);
  });
</script>

<style>
  #mask__hue {
    quiet-slider::part(track) {
      background-image: 
        linear-gradient(
          to right,
          rgb(255, 0, 0) 0%,
          rgb(255, 255, 0) 17%,
          rgb(0, 255, 0) 33%,
          rgb(0, 255, 255) 50%,
          rgb(0, 0, 255) 67%,
          rgb(255, 0, 255) 83%,
          rgb(255, 0, 0) 100%
        );
    }

    quiet-slider::part(indicator) {
      display: none;
    }
  }
</style>

API Jump to heading

Importing Jump to heading

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

CDN

npm

To manually import <quiet-text-mask> from the CDN, use the following code.

import 'https://cdn.jsdelivr.net/npm/@quietui/quiet-browser@1.0.0/dist/components/text-mask/text-mask.js';

To manually import <quiet-text-mask> from npm, use the following code.

import '@quietui/quiet/dist/components/text-mask/text-mask.js';

Slots Jump to heading

Text Mask supports the following slots. Learn more about using slots

Name	Description
(default)	The text to be masked.

Properties Jump to heading

Text Mask has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

Property / Attribute	Description	Reflects	Type	Default
`image`	The URL of the image to use for the mask.		`string`	`''`
`fixed`	Creates a parallax-like effect where the image stays fixed while scrolling		`boolean`	`false`

CSS custom properties Jump to heading

Text Mask supports the following CSS custom properties. You can style them like any other CSS property. Learn more about CSS custom properties

Name	Description	Default
`--brightness`	Adjusts the brightness of the mask image (0-200%, where 100% is normal)
`--contrast`	Adjusts the contrast of the mask image (0-200%, where 100% is normal)
`--grayscale`	Converts the mask to grayscale (0-100%, where 0% is normal and 100% is fully grayscale)
`--hue-rotate`	Rotates the hue of the mask (0-360deg)

Text Mask

Examples Jump to heading #

Providing text Jump to heading #

Joy & Mystery

Fitting text Jump to heading #

Repeating patterns Jump to heading #

Fixed backgrounds Jump to heading #

Brightness Jump to heading #

Contrast Jump to heading #

Grayscale Jump to heading #

Hue rotation Jump to heading #

API Jump to heading #

Importing Jump to heading #

Slots Jump to heading #

Properties Jump to heading #

CSS custom properties Jump to heading #