Designers ship images cropped into circles, hexagons, and slanted hero banners all the time. You do not need a photo editor for any of that. With CSS masks and clip-path, you can apply “non-destructive” shapes to any image: the source stays intact, the shape is fully adjustable, and the same asset adapts across breakpoints and themes. By the end of this article you will build a circular avatar mask and a hexagon gallery mask, both controlled with CSS variables and ready for hover animation.
Why Using CSS Shapes for “Non-Destructive” Image Masks Matters
Masking with CSS keeps your pipeline flexible. One source image can present as a circle on a profile card, a hexagon in a gallery, and a diagonal crop in a hero without exporting new files. Art direction stays in CSS where it belongs, responsive tweaks are a variable change, and theming can adjust feathering or edge style globally. Non-destructive masks also save time: no handoff loops for re-crops, no new CDN entries for every shape variant, and no regrets when a layout changes next week. Modern properties like mask-image and clip-path render on the GPU and work well on mobile. You can even animate the mask for an engaging hover without touching the image.
Prerequisites
This tutorial keeps the HTML light and focuses on CSS. You will get more from it if you are comfortable with basic CSS layout and custom properties.
- Basic HTML
- CSS custom properties
- CSS pseudo-elements (::before / ::after)
Step 1: The HTML Structure
Keep the markup semantic and reusable. Each demo uses a figure with an image and a caption. The image element receives a mask class that sets the shape. This separation lets you swap classes for different shapes without touching the markup or the source image.
<!-- HTML -->
<main class="wrapper">
<section class="masks">
<figure class="card">
<img
class="mask mask--circle"
src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=800&auto=format&fit=crop"
alt="Smiling person portrait"
/>
<figcaption>Circle Avatar Mask</figcaption>
</figure>
<figure class="card">
<img
class="mask mask--hex"
src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=1200&auto=format&fit=crop"
alt="Forest and mountain at sunrise"
/>
<figcaption>Hexagon Gallery Mask</figcaption>
</figure>
</section>
</main>
Step 2: The Basic CSS & Styling
Set up a comfortable baseline: a wrapper for layout, a card style, and common rules for images. Custom properties control sizing, spacing, and the softness of feathered masks. The goal is to give each mask a predictable box, an aspect ratio, and good object-fit behavior while keeping every pixel of the original image intact under the mask.
/* CSS */
:root {
--bg: #0f172a;
--text: #e5e7eb;
--muted: #94a3b8;
/* shared sizing */
--card-size: 260px;
--gap: 2rem;
/* mask tuning */
--feather: 0px; /* set > 0px to soften circle edges */
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
color: var(--text);
background: radial-gradient(1200px 800px at 10% -20%, #111827 0%, var(--bg) 60%);
}
.wrapper {
max-width: 1100px;
margin-inline: auto;
padding: 3rem 1rem 5rem;
}
.masks {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-size)), 1fr));
gap: var(--gap);
align-items: start;
}
.card {
display: grid;
gap: 0.75rem;
align-items: start;
}
.card img {
display: block;
width: 100%;
height: auto;
}
.card figcaption {
font-size: 0.9rem;
color: var(--muted);
}
/* shared mask image rules */
.mask {
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center;
background-color: #000; /* helps in high-contrast modes */
}
Advanced Tip: Use CSS variables for shape parameters such as feather amount, corner smoothness, and polygon offsets. A single theme switch can harden edges for a crisp grid or soften them for a friendlier look, without new exports.
Step 3: Building the Circular Avatar Mask
We will make a circle with mask-image so the mask can be feathered on demand. The fallback uses clip-path: circle() and border-radius for broad coverage. Safari still uses -webkit-mask, so we write both properties.
/* CSS */
.mask--circle {
/* Feathered circle mask using a radial gradient */
/* Hard edge at 0px feather; soften by increasing --feather */
-webkit-mask-image: radial-gradient(
closest-side at 50% 50%,
#000 calc(100% - var(--feather)),
transparent 100%
);
mask-image: radial-gradient(
closest-side at 50% 50%,
#000 calc(100% - var(--feather)),
transparent 100%
);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
/* Fallbacks */
clip-path: circle(50% at 50% 50%);
border-radius: 50%;
}
How This Works (Code Breakdown)
The mask-image radial-gradient paints a solid black circle that marks visible pixels and fades to transparent outside the edge. Black parts reveal the image, transparent parts hide it. The closest-side keyword locks the circle to the shortest distance to the box edge, keeping it centered and perfect at any size. The variable –feather sets a hard edge when 0px, and adds a subtle fade as you increase it. This looks great for avatars over busy backgrounds.
mask-image and -webkit-mask-image produce the same result, but writing both keeps Safari covered. Setting mask-size to 100% and mask-repeat to no-repeat ensures the gradient matches the element box and never tiles. The clip-path circle declaration and border-radius act as a backstop where mask-image is not supported. If you need a refresher on circular geometry and box behavior, revisit this guide on how to make a circle with CSS. The same mental model applies here, except the edge comes from a mask instead of border-radius.
Step 4: Building the Hexagon Gallery Mask
For polygonal shapes, clip-path is straightforward and very fast. We will draw a regular hexagon using percentage points. The mask remains non-destructive: remove the class and the rectangle returns without any image change.
/* CSS */
.mask--hex {
/* Regular hexagon as a 6-point polygon */
clip-path: polygon(
25% 0%,
75% 0%,
100% 50%,
75% 100%,
25% 100%,
0% 50%
);
/* Make sure the box fits the shape nicely */
aspect-ratio: 1 / 1;
/* Optional subtle rounding for texture on non-WebKit browsers */
border-radius: 8px;
}
/* Legacy fallback: if clip-path fails completely, the rounded box still looks decent */
@supports not (clip-path: polygon(0 0)) {
.mask--hex {
border-radius: 16px;
}
}
How This Works (Code Breakdown)
The polygon points define the six vertices of a regular hexagon inside a square box. The first two points draw the top edge, the next lands on the right middle, then the bottom, then the left middle, and back to the start. Because the values are in percentages, the hexagon scales with the box. aspect-ratio: 1 / 1 keeps the image square, and object-fit: cover from the base .mask rule fills the shape without distortion.
clip-path performs well since the compositor handles it on most GPUs. You can animate those points for hover effects, and you can define variants with CSS variables if you want rounded corners or a taller hex. For a deeper primer on hex geometry, this tutorial on how to make a hexagon with CSS walks through the math behind the percentages we used here.
If a diagonal hero crop is on your backlog, that is just a polygon with three points or a pair of right triangles. The same principles from building a right-pointing triangle transfer to clip-path with a three-vertex polygon.
Advanced Techniques: Adding Animations & Hover Effects
You can animate masks without touching the image file. Clip-path polygons transition between shapes with the same number of points, and mask-image gradients can shift size, position, or feather amount for a gentle reveal.
/* CSS */
/* 1) Soften the avatar edge on hover by increasing the feather */
.mask--circle {
transition: -webkit-mask-image 250ms ease, mask-image 250ms ease;
}
.mask--circle:hover {
--feather: 6px;
}
/* 2) Hexagon micro-morph: nudge the vertices for a tactile hover */
.mask--hex {
transition: clip-path 350ms cubic-bezier(.2,.7,.2,1);
}
.mask--hex:hover {
clip-path: polygon(
23% 2%,
77% 2%,
98% 50%,
77% 98%,
23% 98%,
2% 50%
);
}
/* Optional: animated focus style using a pseudo-element ring without changing the image */
.card:focus-within::before {
content: "";
position: absolute;
inset: -6px;
border-radius: 16px;
background: conic-gradient(from 0deg, #22d3ee, #a78bfa, #22d3ee);
filter: blur(6px);
opacity: 0.6;
z-index: -1;
}
/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
.mask--circle,
.mask--hex {
transition: none;
}
}
The circle hover works by changing –feather, which updates the radial gradient in the mask. The hex hover nudges each point outward by a couple of percentage points, which creates a subtle “press” effect. If you want a bolder morph, define a second polygon with the same six points but a very different shape and transition between them. The pseudo-element focus ring sits behind the card and does not interfere with the mask or the image pixels.
Accessibility & Performance
Masking changes the edge of an image, not its meaning. Treat the image as content and write a proper alt description. If an image is decorative, move it to CSS as a background-image or set aria-hidden="true" on the <img> and present a text equivalent nearby. Keep focus handling on the surrounding card or link, not the image itself, for a smoother tab order.
Accessibility
Use semantic markup like figure and figcaption for galleries and avatars. Make the entire card a link when the image is the entry point rather than placing a link only on the caption. For motion, guard hover effects with prefers-reduced-motion and keep transitions short. If you apply shape-outside for text wrapping around images, provide a sensible fallback for small screens where the text can reflow into a standard block layout.
Performance
clip-path and mask-image are fast enough for most UIs, even on mobile. The properties run on the compositor in many engines, and they avoid layout thrash. Animating polygon points is costlier than animating transform, so keep those counts low on a page and limit the duration. Scale your images to an appropriate resolution for their display size, set width and height attributes to reduce layout shifts, and use object-fit: cover to protect composition inside the mask. If you need thousands of masked thumbnails, consider server-side responsive images with srcset and sizes to keep bytes low.
Ship Shapes Without New Exports
You created a circular avatar mask with a tunable feather and a hexagon gallery mask, both applied with CSS and both non-destructive. The same patterns extend to triangles, diamonds, and custom polygons. Now you have the tools to shape, animate, and re-theme images straight from CSS while keeping your original assets untouched.