13 CSS mask Examples

About a code

Sweater Swag

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

About a code

Grainy Gradient Blob with Filters, Masking and Blending

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Clipping Mask

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

CSS Mask

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js

About a code

CAAMP Silhouette

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

CSS Cutout Button with Mask Composite

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Circular Mask Transition with CSS

Circular image transition using CSS masks, some fancy text effects and mouse position tracking with CSS variables.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

CSS-Mask Button Hover Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Pure CSS Infinity Roll Loader with Houdini Magic

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Animated CSS mask-image Gradient

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

The Future Of Possible

Amazing mask effect CSS only.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Image Mask Reveal Animation

Scroll down to reveal the image.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

About a code

Applying a CSS and SVG mask

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -