CSS Clip-Path Image Masking
Reveal images with CSS clip-path — circular image masks, polygon masks, and CSS hover reveal effects.
Published:
Tags: CSS clip-path image mask, circular image CSS, CSS image clip mask
CSS Clip-Path Image Masking clips an element's visible region to a shape — everything outside the shape becomes transparent. Applied to images, it creates circular avatars, diagonal section cuts, polygon reveals, and hover animations without any image editing software. The shape is defined in CSS, making it responsive, animatable, and instantly adjustable. --- What is Basic Image Masking? applies directly to the element or any element with a background image: ensures the image fills its container before clipping, preventing distortion. What is Circular Avatar Pattern? The circular avatar is the most common image masking use case: The approach keeps the image in normal flow with no extra wrapper element. The approach has slightly better support for edge cases with borders and box-shadows.…
Frequently Asked Questions
How do I make a circular image in CSS?
Two approaches: `border-radius: 50%; overflow: hidden;` on a container wrapping an `<img>`, or `clip-path: circle(50%)` directly on the `<img>` element. The `border-radius` approach is more broadly supported and works with `object-fit: cover` for image cropping. `clip-path: circle()` applies the clip to the image's rendered box.
How do I clip an image with CSS?
`clip-path` on an image element clips its visible region to the specified shape. `clip-path: circle(50%)` creates a circular mask. `clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%)` clips to a pentagon. The image itself is not modified — only what is visible changes.
How do I reveal an image on hover with CSS?
Animate `clip-path` between a hidden and visible state using `transition`. For example, `clip-path: inset(0 100% 0 0)` hides the image from the right; transitioning to `clip-path: inset(0 0% 0 0)` reveals it. This creates a slide-in wipe effect. Polygon-to-polygon animations are also possible.
What is the difference between clip-path and mask in CSS?
`clip-path` uses geometric shapes (circles, polygons, ellipses, SVG paths) to define the visible region with hard edges. `mask` uses an image or gradient as a luminance or alpha mask, allowing soft edges, gradients, and complex blending. `clip-path` is simpler and more performant; `mask` offers more visual fidelity.
How do I create a spotlight effect?
Use `clip-path: circle()` with a `radial-gradient` or animate the circle center with a JavaScript-driven CSS custom property. A spotlight that follows the mouse updates `--cx` and `--cy` CSS variables, which feed into `clip-path: circle(150px at var(--cx) var(--cy))` on a dark overlay layer.
All articles · theproductguy.in