• Hajipur, Bihar, 844101

☰
❮
❯

CSS

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)

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.

CSS Masking Quiz

Q1: What does mask-image do?

A. Adds a background image
B. Defines the mask that controls element visibility
C. Sets border image
D. Clips element edges

Q2: Which value prevents mask image from repeating?

A. repeat
B. no-repeat
C. repeat-x
D. repeat-y

Q3: What property controls the size of the mask?

A. mask-position
B. mask-size
C. mask-repeat
D. mask-mode

Q4: What type of images can be used as masks?

A. Only PNG
B. Only SVG
C. Any image with transparency (PNG, SVG, gradients)
D. Only JPEG

Q5: Which property controls how multiple masks combine?

A. mask-mode
B. mask-composite
C. mask-repeat
D. mask-origin

Q6: What does mask-mode: alpha; mean?

A. Use luminance for masking
B. Use alpha channel (transparency) for masking
C. Use grayscale masking
D. Use RGB masking

Q7: Can CSS masks be animated?

A. No
B. Yes, using transitions and keyframes
C. Only with JavaScript
D. Only in SVG

Q8: Which CSS property positions the mask image?

A. mask-size
B. mask-position
C. mask-repeat
D. mask-origin

Q9: Which is NOT a valid mask image type?

A. Gradient
B. SVG
C. PNG
D. Plain text

Q10: What is the effect of a mask?

A. Changes color
B. Controls element visibility/transparency
C. Adds border
D. Adds shadow
← Previous Next →
Login
Go Back Top