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.

Made with: HTML,CSS

View Code

Css Menu Concept (Clip-Path)

Made with: HTML (Pug),CSS (Sass)

View Code

Split Image | Hover Effect

Made with: HTML,CSS,JS

View 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.

Made with: HTML,CSS (SCSS)

View Code

Brush Effect: Svg Mask Using Clip-Path

Made with: HTML,CSS

View Code

Slider Animation Effect

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

Made with: HTML,CSS (SCSS),JS

View Code

Clip-Path Revealing Slider

Made with: HTML,CSS (SCSS),JS

View Code

Reverse Clip-Path With Blend-Modes

Made with: HTML,CSS (SCSS)

View Code

Actual Rotating Slider

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

Made with: HTML,CSS,JS

View Code

Css Polygons With Clip-Path

Made with: HTML,CSS

View Code