1. tailwind utilities
  2. masks

Masks

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

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