Css Module 37

  Module 37 : CSS techniques used to create complex visual effects by showing only specific parts of an element.

1. Introduction

Clipping and masking are advanced CSS techniques used to create complex visual effects by showing only specific parts of an element.

Clipping (clip-path): Defines a visible region using basic or complex shapes (the rest is hidden).

Masking (mask-image): Uses images (often gradients or alpha masks) to control transparency.

2. clip-path – Clipping Elements into Shapes

2.1 Syntax

css

 code

clip-path: <shape> | url(#svgPath) | inset(...) | path(...) | polygon(...);

2.2 Built-in Shape Functions

circle()

ellipse()

inset()

polygon()

path() (with SVG path data)

2.3 Example 1: Clipping to a Circle

html

code

<div class="circle-clip">Clip me in a circle</div>

css

 code

.circle-clip { width: 300px; height: 300px; background: linear-gradient(to right, #0f0, #0ff); clip-path: circle(50% at 50% 50%); }

Explanation:

circle(50% at 50% 50%): Makes a circular clip at the center, with radius 50% of the smallest dimension.

2.4 Example 2: Custom Polygon Shape

      

html

 code

<div class="polygon-clip">Polygon Clip</div>

css

 code

.polygon-clip { width: 300px; height: 300px; background: url('pattern.jpg'); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }

Explanation:

Creates a diamond shape using 4 points. The element will only show content within that shape.

2.5 Example 3: Using SVG Path

html

code

SVG Star Clip

css

 code

.svg-clip { width: 300px; height: 300px; background: orange; clip-path: url(#starClip); }

3. mask-image – Masking with Gradients or Images

3.1 Syntax

css

 code

mask-image: <url> | <gradient>; mask-mode: alpha | luminance; mask-repeat: no-repeat | repeat; mask-position: center; mask-size: cover;

3.2 How It Works

The white (or opaque) areas in the mask are visible.

The black (or transparent) areas are hidden.

3.3 Example 1: Radial Gradient Mask

     

     

 

html

code

<div class="mask-gradient">Masked with Gradient</div>

css

code

.mask-gradient { width: 300px; height: 300px; background: url('scene.jpg'); mask-image: radial-gradient(circle, black 30%, transparent 70%); mask-repeat: no-repeat; mask-position: center; }

Explanation:

The center will be visible (black), while edges fade to transparency.

3.4 Example 2: Using a PNG Mask Image

css

code

.mask-image { width: 400px; height: 400px; background: url('scene.jpg'); mask-image: url('mask-shape.png'); mask-size: cover; mask-repeat: no-repeat; }

Explanation:

The mask-shape.png defines which parts of the image are visible based on alpha channel.

4. Combining clip-path & mask-image

You can use both to clip and then fade or shape-mask content.

Example

css

code

.combined { width: 400px; height: 400px; background: url('scene.jpg'); clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); mask-image: radial-gradient(circle, black 50%, transparent 100%); mask-size: cover; }

5.  Exercises

1: Clip Path Polygon Designer

Objective: Create a custom polygon clipping effect using clip-path.

Steps

Create a square div (300x300).

Apply a polygon with at least 5 points.

Use hover state to animate shape transition.

css

 code

div { width: 300px; height: 300px; background: linear-gradient(to bottom, #ff7e5f, #feb47b); clip-path: polygon(50% 0%, 100% 25%, 80% 100%, 20% 100%, 0% 25%); transition: clip-path 0.5s; } div:hover { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }

 2: Mask with Gradient Reveal

    

Objective: Use mask-image with a gradient to fade in content.

Steps

Create a div with background image.

Apply a linear-gradient as mask-image.

Animate the gradient to reveal on hover.

css

 code

div { width: 500px; height: 300px; background: url('your-image.jpg') center/cover; mask-image: linear-gradient(to right, black 0%, transparent 100%); transition: mask-image 0.5s; } div:hover { mask-image: linear-gradient(to right, black 0%, black 100%); }

 3: SVG Path + PNG Mask Combo

Objective: Clip with an SVG shape and mask with PNG for complex effects.

Setup

Create a star clip-path using SVG.

Apply a PNG mask with soft alpha edges.

html

code

css

code

.advanced { width: 300px; height: 300px; background: url('galaxy.jpg'); clip-path: url(#starClip); mask-image: url('soft-edge-mask.png'); mask-size: cover; }

6. Browser Support Notes

Feature

Chrome

Firefox

Safari

Edge

clip-path

Yes

Yes

Yes

Yes

mask-image (CSS)

Yes

Yes

Partial

Yes

Use feature queries or fallback styles for maximum support.

7. Conclusion

CSS clipping and masking allow for creative shape-based designs without relying on extra images or JavaScript. Understanding how to use clip-path and mask-image together helps in creating:

Custom UI shapes

Soft reveals

Interactive animations

Game UIs, posters, overlays