CSS · Visual Effects

Masks & Clipping

Create complex shapes and hide content

Find videos you like?

Save to resource drawer for future reference!

CSS Masks & Clipping

Cut elements into custom shapes

Masks & Clipping = Custom Shapes! ✂️

clip-path cuts elements into shapes. mask uses images for complex visibility control. Perfect for creative layouts and unique designs!

clip-path

Clips element to geometric shapes
circle(), polygon(), ellipse()

mask

Uses images for masking
Gradients, PNGs, SVGs

clip-path Shapes

Basic geometric shapes

circle()

Perfect circle

clip-path: circle(50%);

ellipse()

Oval shape

clip-path: ellipse(50% 30%);

polygon()

Triangle (any shape!)

clip-path: polygon(50% 0, 100% 100%, 0 100%);

inset()

Rectangle with rounded corners

clip-path: inset(10px 20px 30px 40px);

Pro Tip!

Use Clippy tool to generate clip-path values visually!

Interactive Demo

Different clip-path shapes

clip-path Shapes Gallery

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="container">
      <h1>✂️ clip-path Shapes</h1>
      <div class="grid">
        <div class="shape-box">
          <div class="shape circle">Circle</div>
          <div class="label">circle(50%)</div>
        </div>
        <div class="shape-box">
          <div class="shape ellipse">Ellipse</div>
          <div class="label">ellipse()</div>
        </div>
        <div class="shape-box">
          <div class="shape triangle">Triangle</div>
          <div class="label">polygon()</div>
        </div>
        <div class="shape-box">
          <div class="shape diamond">Diamond</div>
          <div class="label">polygon()</div>
        </div>
        <div class="shape-box">
          <div class="shape hexagon">Hexagon</div>
          <div class="label">polygon()</div>
        </div>
        <div class="shape-box">
          <div class="shape star">Star</div>
          <div class="label">polygon()</div>
        </div>
        <div class="shape-box">
          <div class="shape arrow">Arrow</div>
          <div class="label">polygon()</div>
        </div>
        <div class="shape-box">
          <div class="shape message">Speech</div>
          <div class="label">polygon()</div>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

CSS Masks

Image-based masking

Masks use images (gradients, PNGs, SVGs) where black hides and white shows content.

Mask Properties

/* Gradient mask */
mask-image: linear-gradient(to bottom, black, transparent);

/* Image mask */
mask-image: url('mask.png');

/* Size and position */
mask-size: cover;
mask-position: center;
mask-repeat: no-repeat;

Fade Out

mask-image: linear-gradient(to bottom, black 80%, transparent);

Text Reveal

mask-image: url("text-mask.svg");

Image Blend

mask-image: linear-gradient(45deg, black, white);

Common Use Cases

Practical applications

Profile Pictures

Circular avatars

clip-path: circle()

Hero Sections

Angled edges

clip-path: polygon()

Hover Effects

Shape morphing

clip-path + transition

Image Reveals

Fade effects

mask-image: gradient

Creative Layouts

Unique shapes

clip-path: polygon()

Remember

clip-path for geometric shapes

mask for image-based masking

Use polygon() for any custom shape

Browser support: All modern browsers

Previous Topic

Blend Modes

mix-blend-mode, background-blend-mode, isolation, and compositing effects.

Next Topic

CSS Shapes

shape-outside, shape-margin, shape-image-threshold, and text wrapping around shapes.

Ask a Question

Have a question about Masks & Clipping? Ask our AI assistant.

🔐 Login to use AI Assistant

CSS · Visual Effects

Masks & Clipping

Create complex shapes and hide content

Find videos you like?

Save to resource drawer for future reference!

CSS Masks & Clipping

Cut elements into custom shapes

Masks & Clipping = Custom Shapes! ✂️

clip-path cuts elements into shapes. mask uses images for complex visibility control. Perfect for creative layouts and unique designs!

clip-path

Clips element to geometric shapes
circle(), polygon(), ellipse()

mask

Uses images for masking
Gradients, PNGs, SVGs

clip-path Shapes

Basic geometric shapes

circle()

Perfect circle

clip-path: circle(50%);

ellipse()

Oval shape

clip-path: ellipse(50% 30%);

polygon()

Triangle (any shape!)

clip-path: polygon(50% 0, 100% 100%, 0 100%);

inset()

Rectangle with rounded corners

clip-path: inset(10px 20px 30px 40px);

Pro Tip!

Use Clippy tool to generate clip-path values visually!

Interactive Demo

Different clip-path shapes

clip-path Shapes Gallery

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="container">
      <h1>✂️ clip-path Shapes</h1>
      <div class="grid">
        <div class="shape-box">
          <div class="shape circle">Circle</div>
          <div class="label">circle(50%)</div>
        </div>
        <div class="shape-box">
          <div class="shape ellipse">Ellipse</div>
          <div class="label">ellipse()</div>
        </div>
        <div class="shape-box">
          <div class="shape triangle">Triangle</div>
          <div class="label">polygon()</div>
        </div>
        <div class="shape-box">
          <div class="shape diamond">Diamond</div>
          <div class="label">polygon()</div>
        </div>
        <div class="shape-box">
          <div class="shape hexagon">Hexagon</div>
          <div class="label">polygon()</div>
        </div>
        <div class="shape-box">
          <div class="shape star">Star</div>
          <div class="label">polygon()</div>
        </div>
        <div class="shape-box">
          <div class="shape arrow">Arrow</div>
          <div class="label">polygon()</div>
        </div>
        <div class="shape-box">
          <div class="shape message">Speech</div>
          <div class="label">polygon()</div>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

CSS Masks

Image-based masking

Masks use images (gradients, PNGs, SVGs) where black hides and white shows content.

Mask Properties

/* Gradient mask */
mask-image: linear-gradient(to bottom, black, transparent);

/* Image mask */
mask-image: url('mask.png');

/* Size and position */
mask-size: cover;
mask-position: center;
mask-repeat: no-repeat;

Fade Out

mask-image: linear-gradient(to bottom, black 80%, transparent);

Text Reveal

mask-image: url("text-mask.svg");

Image Blend

mask-image: linear-gradient(45deg, black, white);

Common Use Cases

Practical applications

Profile Pictures

Circular avatars

clip-path: circle()

Hero Sections

Angled edges

clip-path: polygon()

Hover Effects

Shape morphing

clip-path + transition

Image Reveals

Fade effects

mask-image: gradient

Creative Layouts

Unique shapes

clip-path: polygon()

Remember

clip-path for geometric shapes

mask for image-based masking

Use polygon() for any custom shape

Browser support: All modern browsers

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Blend Modes

CSS Shapes

Building Your Learning Module...

Masks & Clipping

Masks & Clipping = Custom Shapes! ✂️

Pro Tip!

clip-path Shapes Gallery

Mask Properties

Remember

Blend Modes

CSS Shapes

Masks & Clipping

Masks & Clipping = Custom Shapes! ✂️

Pro Tip!

clip-path Shapes Gallery

Mask Properties

Remember