Monsoon v0.2.0
Made by Alexandre Kohler Star

Data display and layout

Mask

Clip any element or image to a shape.

Data display and layout9 classesNo JavaScriptLight and dark

Example

Full

Classes

9 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

ClassTypeWhat it does
Base Base class of the mask. On a <div> in the example. A hook for state rules such as .mask.
CSS
.mask,
.mask-squircle,
.mask-hexagon,
.mask-circle,
.mask-heart,
.mask-star,
.mask-triangle,
.mask-decagon,
.mask-blob {
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}
Modifier Modifier, combined with the mask class. On a <div> in the example. A hook for state rules such as .mask.
CSS
.mask,
.mask-squircle,
.mask-hexagon,
.mask-circle,
.mask-heart,
.mask-star,
.mask-triangle,
.mask-decagon,
.mask-blob {
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.mask-squircle {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C8 0 0 8 0 50s8 50 50 50 50-8 50-50S92 0 50 0Z'/%3E%3C/svg%3E");
}
Modifier Modifier, combined with the mask class. On a <div> in the example. A hook for state rules such as .mask.
CSS
.mask,
.mask-squircle,
.mask-hexagon,
.mask-circle,
.mask-heart,
.mask-star,
.mask-triangle,
.mask-decagon,
.mask-blob {
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.mask-hexagon {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50 0 93.3 25 93.3 75 50 100 6.7 75 6.7 25'/%3E%3C/svg%3E");
}
Modifier Modifier, combined with the mask class. Not used in the example above. A hook for state rules such as .mask.
CSS
.mask-circle {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50'/%3E%3C/svg%3E");
}

.mask,
.mask-squircle,
.mask-hexagon,
.mask-circle,
.mask-heart,
.mask-star,
.mask-triangle,
.mask-decagon,
.mask-blob {
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}
Modifier Modifier, combined with the mask class. On a <div> in the example. A hook for state rules such as .mask.
CSS
.mask,
.mask-squircle,
.mask-hexagon,
.mask-circle,
.mask-heart,
.mask-star,
.mask-triangle,
.mask-decagon,
.mask-blob {
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.mask-heart {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 94C24 76 2 58 2 34 2 18 14 6 29 6c9 0 16 5 21 12 5-7 12-12 21-12 15 0 27 12 27 28 0 24-22 42-48 60Z'/%3E%3C/svg%3E");
}
Modifier Modifier, combined with the mask class. On a <div> in the example. A hook for state rules such as .mask.
CSS
.mask,
.mask-squircle,
.mask-hexagon,
.mask-circle,
.mask-heart,
.mask-star,
.mask-triangle,
.mask-decagon,
.mask-blob {
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.mask-star {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -4 100 100'%3E%3Cpolygon points='50 0 63.5 31.4 97.6 34.5 71.9 57.1 79.4 90.5 50 73 20.6 90.5 28.1 57.1 2.4 34.5 36.5 31.4'/%3E%3C/svg%3E");
}
Modifier Modifier, combined with the mask class. Not used in the example above. A hook for state rules such as .mask.
CSS
.mask-triangle {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50 4 100 92 0 92'/%3E%3C/svg%3E");
}

.mask,
.mask-squircle,
.mask-hexagon,
.mask-circle,
.mask-heart,
.mask-star,
.mask-triangle,
.mask-decagon,
.mask-blob {
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}
Modifier Modifier, combined with the mask class. Not used in the example above. A hook for state rules such as .mask.
CSS
.mask,
.mask-squircle,
.mask-hexagon,
.mask-circle,
.mask-heart,
.mask-star,
.mask-triangle,
.mask-decagon,
.mask-blob {
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.mask-decagon {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='65.5 2.4 90.5 20.6 100 50 90.5 79.4 65.5 97.6 34.5 97.6 9.5 79.4 0 50 9.5 20.6 34.5 2.4'/%3E%3C/svg%3E");
}
Modifier Modifier, combined with the mask class. On a <div> in the example. A hook for state rules such as .mask.
CSS
.mask,
.mask-squircle,
.mask-hexagon,
.mask-circle,
.mask-heart,
.mask-star,
.mask-triangle,
.mask-decagon,
.mask-blob {
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.mask-blob {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M54 3c13 1 21 12 30 20s15 20 13 33-12 22-24 30-27 13-40 9S8 82 5 68 2 42 10 30 41 2 54 3Z'/%3E%3C/svg%3E");
}

Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Mask: start from the base class, then add modifiers -->
<div class="flex flex-wrap gap-4"><div class="mask mask-squircle size-24 bg-gradient-to-br from-primary to-accent"></div><div class="mask mask-hexagon size-24 bg-gradient-to-br from-info to-success"></div><div class="mask mask-heart size-24 bg-gradient-to-br from-danger to-warning"></div><div class="mask mask-star size-24 bg-warning"></div><div class="mask mask-blob size-24 bg-primary"></div></div>

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

Accessibility

  • Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.
Data display and layoutDiffA before and after comparison; drag the divider, which is a native resize handle.Data display and layoutMasonryColumn based masonry that keeps each child whole, auto or with 2, 3 or 4 columns.Data display and layoutBlockquoteA quotation with an accent rule, an optional filled style and a citation.Data display and layoutProseTypography for long form HTML such as articles and Markdown output, in three sizes.

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.