CSS - Masking & Shapes

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 10–15 minutes

Mask and clip content to non-rectangular shapes for creative UI, avatars, and decorative elements.

Learning Objectives

• Create masks with gradients and images.
• Use clip-path to define simple shapes and insets.

Details & Examples

.avatar{ -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 61%); mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 61%); }
.card{ clip-path: inset(0 round 16px); }
.tag{ clip-path: polygon(0 0, 100% 0, 100% 75%, 15% 100%, 0 75%); }

Try it

Common Pitfalls

• Masking support varies—test across browsers and provide fallbacks.

Checks for Understanding

1. Which property would you use to create a rounded rectangle without border-radius?

Exercises

1. Create a circular avatar mask with radial gradients; compare to border-radius: 50%.
2. Use clip-path polygon to create a tag shape with an angled edge.