CSS clip-path, Masks and Blend Modes

Cut elements into shapes with clip-path, fade edges with mask-image, and blend colours and images with mix-blend-mode and background-blend-mode.

Lesson 48 of 49Advanced15 min read

Every element on a web page is a rectangle. Most of the time that's exactly what you want, but designers often reach for diagonal section edges, circular photos, hexagon badges, text that fades out at the bottom, or duotone images. In the past, these effects meant editing images in a graphics program. Today CSS can create them on any element, and they stay sharp and editable.

Three groups of features make it possible. clip-path cuts an element to a shape, hiding everything outside it. Masks, using mask-image, hide parts of an element based on an image or gradient, which allows soft, faded edges. Blend modes, mix-blend-mode and background-blend-mode, combine the colours of overlapping layers the way photo-editing apps do.

In this lesson you'll learn the shape functions, how to animate a clip, how to fade content with gradient masks, and which blend modes are worth knowing. You'll also see where to be careful: clipped content can't be clicked outside its shape, and blended text must still be readable.

clip-path shapes

FunctionExampleShape
circle()circle(50% at 50% 50%)A circle with a radius and centre
ellipse()ellipse(50% 35% at center)An oval
inset()inset(10px round 12px)A rectangle pulled in from each side, optionally rounded
polygon()polygon(50% 0, 100% 100%, 0 100%)Any shape from a list of x y points
path()path("M0 0 L100 0 ...")An SVG path

Points in polygon() are measured from the element's top-left corner, with percentages relative to its width and height. Tools such as Clippy (bennettfeely.com/clippy) let you drag points visually and copy the CSS.

Animating clip-path

clip-path can be animated with transitions as long as both shapes use the same function and the same number of points:

CSS
.reveal { clip-path: inset(0 100% 0 0); transition: clip-path 0.6s; }
.reveal.visible { clip-path: inset(0 0 0 0); }

This "wipe" effect is popular for revealing images and headings. Unlike width animations, clipping doesn't change the layout, so nothing around it moves.

Masks with gradients

CSS
.fade-bottom {
  mask-image: linear-gradient(to bottom, black 60%, transparent);
}

A mask uses the transparency of an image or gradient: where the mask is opaque, the element shows; where it's transparent, the element is hidden; in between, it partly shows. That gives soft edges that clip-path can't, such as text fading into a "Read more" button, or a photo dissolving into the background. Masks can also use SVG or PNG images for shaped cut-outs.

Blend modes

PropertyBlends…
mix-blend-modean element with whatever is behind it
background-blend-modean element's own background layers with each other

Common values are multiply (darkens, like layering ink), screen (lightens), overlay (boosts contrast), difference (inverts where layers overlap) and luminosity. Combining a photo with a colour using background-blend-mode: multiply creates a duotone effect that matches your brand without editing the image.

CSS clip-path Syntax

Shapes, masks and blending

.avatar { clip-path: circle(50%); }
.section { clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); }
.card { clip-path: inset(0 round 16px); }
.excerpt { mask-image: linear-gradient(black 70%, transparent); }
.title { mix-blend-mode: difference; }
.hero { background: url(photo.jpg), #2563eb; background-blend-mode: multiply; }

CSS clip-path Summary

  • clip-path cuts an element to a shape: circle(), ellipse(), inset(), polygon() or path().
  • Clip shapes animate smoothly when they use the same function and number of points.
  • mask-image with a gradient creates soft, faded edges.
  • mix-blend-mode blends an element with what's behind it; background-blend-mode blends its own backgrounds.
  • Clipped elements keep their layout space, and only the visible part is clickable.

CSS clip-path Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

Shapes with clip-path

.row { display: flex; flex-wrap: wrap; gap: 12px; }
.shape {
  width: 110px; height: 110px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #f97316, #db2777);
  color: white; font: 600 13px sans-serif;
}

.circle { clip-path: circle(50%); }
.tri { clip-path: polygon(50% 0, 100% 100%, 0 100%); align-content: end; padding-bottom: 14px; box-sizing: border-box; }
.hex { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
.rounded { clip-path: inset(12px round 20px); }
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 9A circle with a radius of half the box.
  2. Line 10Three points make a triangle; the label moves down so it stays inside the shape.
  3. Line 11Six points make a hexagon.
  4. Line 12A rectangle pulled in 12px from each side, with rounded corners.
Example 2

A slanted section and a wipe reveal

Hover over the photo to reveal it.

.slant {
  clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
  background: #16a34a;
  color: white;
  padding: 24px 20px 56px;
  font-family: sans-serif;
}

.reveal { display: block; max-width: 100%; height: auto; border-radius: 10px; }
.reveal { clip-path: inset(0 70% 0 0); transition: clip-path 0.6s ease; }
.reveal-wrap:hover .reveal { clip-path: inset(0 0 0 0); }
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 2The bottom edge slopes from 75% down on the right to 100% on the left.
  2. Line 10The photo starts with 70% hidden from the right.
  3. Line 11On hover the clip opens smoothly to show the whole image.
Example 3

Fades and duotones

.excerpt {
  max-width: 420px;
  max-height: 110px;
  overflow: hidden;
  font: 16px/1.6 Georgia, serif;
  mask-image: linear-gradient(to bottom, black 50%, transparent);
}

.duo {
  height: 160px;
  max-width: 420px;
  margin-top: 12px;
  border-radius: 12px;
  background: url("https://picsum.photos/seed/duo/800/320") center / cover, #2563eb;
  background-blend-mode: multiply;
}
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 6The text fades out towards the bottom, hinting there's more.
  2. Line 14A photo layered over a blue background colour.
  3. Line 15Multiply blends them into a blue duotone.

Common CSS clip-path Mistakes

Animating between different shape functions

Don't
.box { clip-path: circle(20%); transition: clip-path 0.4s; }
.box:hover { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } /* jumps, no animation */
Do
.box { clip-path: circle(20%); transition: clip-path 0.4s; }
.box:hover { clip-path: circle(75%); }

Clipping away important content

Don't
.badge { clip-path: polygon(50% 0, 100% 100%, 0 100%); } /* text in the corners is cut off */
Do
.badge { clip-path: polygon(50% 0, 100% 100%, 0 100%); padding-top: 40%; text-align: center; }

Keep text inside the visible shape.

Unreadable blended text

Don't
h1 { mix-blend-mode: overlay; color: white; } /* nearly invisible on light photos */
Do
h1 { color: white; text-shadow: 0 2px 8px rgb(0 0 0 / 0.5); }

Blend modes look striking, but always check text contrast.

CSS clip-path in Real Projects

Where you'll see these effects

Landing pages use slanted and wavy section edges made with clip-path. Portfolio sites reveal images with clip animations as you scroll. News sites fade long articles with a gradient mask above a "Continue reading" button. Brands like Spotify popularised duotone imagery, which background-blend-mode recreates in the browser.

CSS clip-path Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Clip the avatar into a circle.

.avatar {
  clip-path: (50%);
}
Multiple choiceeasy

What happens to the parts of an element outside its clip-path?

Multiple choicemedium

Which feature can make soft, faded edges?

Multiple choicemedium

What does background-blend-mode blend?

Fix the bugmedium

The box should be a triangle pointing up, and the excerpt should fade from black to transparent towards the bottom. Fix the CSS.

.tri { clip-path: polygon(50% 0 100% 100% 0 100%); }
.ex { mask-image: linear-gradient(transparent, black); }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Triangle clip is valid
  • Mask fades out towards the bottom

CSS clip-path Quiz

5 questions to check what you learned.

  1. Which clip-path function takes a list of points?

    • circle()
    • polygon()
    • inset()
    • ellipse()

  2. What does inset(10px round 16px) create?

    • A rectangle pulled in 10px on every side with 16px rounded corners
    • A circle
    • A shadow
    • A border

  3. When can clip-path animate smoothly?

    • Always
    • Never
    • Only with JavaScript
    • When both shapes use the same function and number of points

  4. Which blend mode darkens, like layering ink?

    • screen
    • difference
    • multiply
    • normal

  5. Can you click the hidden part of a clipped element?

    • Yes, the whole box is clickable
    • No, only the visible shape receives clicks
    • Only with pointer-events: auto
    • Only on touch screens

CSS clip-path Challenge

A hero banner with style

  1. Clip .hero with polygon(0 0, 100% 0, 100% 80%, 0 100%)
  2. Give .hero a background-blend-mode of multiply
  3. Make .photo a circle with clip-path: circle(50%)
  4. Fade .intro with mask-image: linear-gradient(black 60%, transparent)
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Slanted hero
  • Duotone blend
  • Circular photo
  • Faded intro

Related CSS topics

47Shadows & GradientsDepth with box-shadow and colour blends with linear and radial gradients.29Images & FiltersSize and crop images with object-fit and object-position, round them, add filters such as grayscale and blur, build hover effects and image overlays.45TransformsMove, rotate, scale and skew elements without disturbing the layout.
Esc
↑↓ to navigateEnter to open