1. tailwind utilities
  2. masks

Masks

Clip elements to a variety of decorative shapes using CSS mask-image.

Warning

This feature is currently marked as beta. Take caution when using for production. It may receive breaking changes before its stable release.

Avatar

Shapes

Apply classes mask mask-{shape} with any of the shapes defined below.

Circle

Avatar

Squircle

Avatar

Triangle Up

Avatar

Triangle Down

Avatar

Triangle Right

Avatar

Triangle Left

Avatar

Diamond

Avatar

Pentagon

Avatar

Hexagon

Avatar

Cube

Avatar

Octagon

Avatar

Decagon

Avatar

Star

Avatar

Heart

Avatar

Cross

Avatar

Custom Masks

Define your own custom shape. Any valid CSS mask source will work.

css
@utility mask-custom {
	mask-image: url('/path/to/your-shape.svg');
}
html
<img class="mask mask-custom w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />
View page on GitHub