31 CSS clip-path Examples

About a code

Hamburger + clip-path

Using clip-path to create a hamburger menu open effect.

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

Responsive: yes

Dependencies: -

About a code

Shape Slideshow with clip-path

An experimental slideshow using clip-path to create shape transitions between slides.

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

Responsive: yes

Dependencies: -

About a code

Squeaky Portraits with clip-path: path()

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

Responsive: no

Dependencies: -

About a code

Clip-Path Checkbox Animation

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

Responsive: yes

Dependencies: -

About a code

CSS clip-path Editor

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

Responsive: yes

Dependencies: -

About a code

Animated clip-path Slider Concept

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

Responsive: yes

Dependencies: gsap.js

About a code

CSS Shapes Layout Experiment

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

Responsive: yes

Dependencies: -

About a code

Mouse Hover Reveal

Mouse hover utilizing mask-image, clip-path, background-clip, text-fill-color, and JavaScript to adjust in real time with your mouse

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

Responsive: no

Dependencies: jquery.js, gsap.js

About a code

Split Text with clip-path

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

Responsive: yes

Dependencies: -

About a code

Fetch the Bolt Cutters with clip-path

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

Responsive: yes

Dependencies: -

About a code

Pure CSS Image Hover with clip-path

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

Responsive: no

Dependencies: -

About a code

CSS Clip-Path Hover Effect

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

Responsive: yes

Dependencies: -

About a code

Hover with Clip-Path Effect

Just experimenting with the clip-path property.

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

Responsive: no

Dependencies: -

About a code

Clip-Pathed Image Plus Shape-Outside

This is sort of an extreme example but opens up some cool possibilities for flowing text around art-directed images.

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

Responsive: yes

Dependencies: -

About a code

Clip Path Hover Animation

A clip-path hover animation that is fully keyboard accessible.

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

Responsive: no

Dependencies: font-awesome.css

About a code

Pure CSS Loader #31

One element swappy.

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

Responsive: no

Dependencies: -

About a code

Rhomb Gallery on Grids + clip-path

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

Responsive: yes

Dependencies: -

About a code

Brand Cut Zoom

Using clip-path to create a playful entry of images.

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

Responsive: yes

Dependencies: -

About a code

Catpacks: Combining Clip Path & Shape Outside

Use clip-path and shape-outside for wrapping your text round an image.

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

Responsive: yes

Dependencies: -

About a code

clip-path: path()

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

Responsive: no

Dependencies: -

About a code

clip-path Generator with React + CSS Variables

A simple clip-path generator made with React. It uses CSS variables to update the node positions for the clip-path and supports the various clip-path styles.

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

Responsive: no

Dependencies: react.js, react-dom.js

About a code

CSS Gradient Clip-Path Borders

This example shows how the CSS clip-path property can be used to create a variety of shaped gradient borders.

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

Responsive: no

Dependencies: -

About a code

Split Image | Hover Effect

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

Responsive: no

Dependencies: tweenmax.js

About a code

CSS Menu Concept (clip-path)

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

Responsive: no

Dependencies: -

About a code

shape-outside with clip-path

Using shape-outside you can wrap text around a shape, but adding clip-path allows for the shape to be cut out from the whole.

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

Responsive: yes

Dependencies: -

About a code

Brush Effect: SVG Mask Using clip-path

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

Responsive: yes

Dependencies: -

About a code

Slider Animation Effect

Leveraged CSS border-image & clip-path to create a slider animation effect.

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

Responsive: no

Dependencies: vue.js

About a code

Clip-Path Revealing Slider

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

Responsive: yes

Dependencies: -

About a code

Reverse clip-path with blend-modes

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

Responsive: yes

Dependencies: -

About a code

Actual Rotating Slider

Proof of concept rotating slider. Uses clip-path and lots of math.

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

Responsive: no

Dependencies: jquery.js

About a code

CSS Polygons with clip-path

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

Responsive: no

Dependencies: -