Mask: Blazor mask component

Examples

Shapes

Every MaskShape value; give the mask a size and a background or an image.

Squircle

Circle

Hexagon

Star

Star2

Triangle

Heart

Diamond

Pentagon

Hexagon2

Decagon

Triangle2

Triangle3

Triangle4

website/Examples/Layout/MaskShapesExample.razor Source

Around content

Any content can be clipped, such as initials for team avatars.

Ana Silva

Tom Becker

Priya Nair

website/Examples/Layout/MaskContentExample.razor Source

Half masks

Half 1 and 2 keep the left or right half of the shape, which is how half-star scores are built.

3.5 / 5

website/Examples/Layout/MaskHalfExample.razor Source

Playground

Pro

ChildContent

Shape MaskShape

<Mask
      Shape="MaskShape.Heart"
      Class="grid size-40 place-items-center bg-primary font-display text-xl font-bold text-primary-content">
    Pro
</Mask>

API

<Mask>

DaisyBlazor

Parameters

Half int?
= null
Optional half-mask modifier. Pass 1 to apply mask-half-1 (left/top half) or 2 for mask-half-2 (right/bottom half). Any other value is ignored.
Shape MaskShape
= MaskShape.Squircle
Geometric shape used to clip the content.
Class string
= null
Extra CSS classes merged onto the .mask element.
Style string
= null
Inline CSS style applied to the .mask element.

Name	Type	Default	Description
Half	int?	null	Optional half-mask modifier. Pass 1 to apply mask-half-1 (left/top half) or 2 for mask-half-2 (right/bottom half). Any other value is ignored.
Shape	MaskShape	MaskShape.Squircle	Geometric shape used to clip the content.
Class	string	null	Extra CSS classes merged onto the .mask element.
Style	string	null	Inline CSS style applied to the .mask element.

Content

ChildContent RenderFragment
Content to clip — typically an <img> element.

Name	Type	Description
ChildContent	RenderFragment	Content to clip — typically an <img> element.