css clip path examples

35 Creative use of CSS clip-path examples

Want to use CSS clip-path property?

Check these creative use of CSS clip-path.

You may also like

CSS Clip-Path Hover Effect

Dev: Ryan Mulligan

CSS Clip path animation

Dev: mario s maselli

clip-path mouse revelation

Dev: Virtuousquare

Password Reveal

Dev: Mikael Ainalem

Expand/collapse cards with figure cut text

Dev: Mikael Ainalem

CSS Clip-path Card Hover Effects

Dev: Ahmad Emran

CSS Gradient Clip-Path Borders

Dev: George W. Park

CSS text glitch effect (clip-path & mix-blend-mode)

Dev: Thomas Tortorini

CSS clip-path hover animation

Dev: Soufiane Lasri

The big short

Dev: Vasilis Tsirimokos

Sense of depth (css-only)

Dev: ycw

CSS Clip-Path Masks with Custom Properties as API

Dev: Stas Melnikov

CSS Ripped Border Effect with clip-path

Dev: Clément Paris

Dynamic Graphic Novel Panels with CSS Clip-Path

Dev: Dudley Storey

CSS Clip-path Menu

Dev: Arjan Jassal

Jalousie text animation

Dev: Jonas Sandstedt

Hamburger + clip-path

Dev: Mikael Ainalem

Animated clip-path slider Concept

Dev: Jake Whiteley

Morphing Polygons

Dev: Dave Lunny

Triangular Sidebar Menu (webkit only)

Dev: Nikolay Talanov

Clip-Path Revealing Slider

Dev: Nikolay Talanov

Slider Animation Effect

Dev: Emily Hayman

Auto Hexagonal CSS Grid Layout

Dev: Kseso

Split Showcase

Dev: Arsen Zbidniakov

Mouse hover reveal – Strategy Meets Creativity

Dev: Wes Couch

Clipped Image Reveal on Hover

Dev: Katherine Kato

Hexagon Grid

Dev: Tiffany Stoik

The circular menu

Dev: Mikael Ainalem

Responsive CSS Grid – Books

Dev: Andy Barefoot


Dev: Dannie Vinther

Hexagon Gallery

Dev: Gabriela Johnson

Fancy Slider

Dev: Nikolay Talanov

Rhomb gallery on grids + clip-path

Dev: yoksel

Material Design Menu

Dev: Bennett Feely

Brand cut zoom

Dev: Mikael Ainalem

Scroll to Top