• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

CSS Masking

← Previous Next →

🔹 What is CSS Masking?

CSS Masking allows you to hide or reveal parts of an element using a mask image or mask properties. It works similarly to clipping but can create complex transparency effects by controlling which parts of an element are visible based on the mask.

🔸 How CSS Masking Works

  • The mask defines the transparency of different parts of an element.

  • Areas covered by the mask are visible; masked-out areas become transparent.

  • Masks can be images, gradients, or SVG shapes.

  • Masking uses properties like mask-image, mask-position, mask-size, and more.

🔸 Common Mask Properties

Property Description Example
mask-image Image or gradient used as a mask mask-image: url(mask.png);
mask-size Size of the mask image mask-size: cover;
mask-position Position of the mask mask-position: center;
mask-repeat Repetition of the mask image mask-repeat: no-repeat;
mask-mode How mask is applied (alpha or luminance) mask-mode: alpha;
mask-composite How multiple masks combine mask-composite: intersect;
mask-origin Mask positioning area mask-origin: border-box;

🔸 Example: Simple Mask Using an Image

img {
  mask-image: url('mask-shape.png');
  mask-size: cover;
  mask-repeat: no-repeat;
}

This applies a mask shape over the image, showing only masked areas.

🔸 Example: Mask with Gradient

div {
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

This gradually reveals the top 50% of the element and fades out the rest.

Practice Questions

Q1. Apply an image mask to a div using mask-image.

Q2. Use a gradient mask to fade out the bottom half of an image.

Q3. Prevent mask image from repeating using mask-repeat.

Q4. Center a mask image over an element with mask-position.

Q5. Use mask-size: contain to fit mask inside container.

Q6. Combine multiple masks using mask-composite.

Q7. Create a circular mask shape with an SVG mask.

Q8. Animate a mask to reveal an image on hover.

Q9. Use mask-mode to apply alpha masking.

Q10. Create a text masking effect where text reveals an image behind it.

← Previous Next →

CSS

online coding class codepractice

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

codepractice logo
Login
Go Back Top