CSS Clip Path Generator

Create custom shapes with CSS clip-path using interactive visual editor

Forma

Raio50%

Centro X50%

Centro Y50%

CSS

clip-path: circle(50% at 50% 50%);

Código Completo

.element {
  clip-path: circle(50% at 50% 50%);
}

Keep exploring

Tools that go well with what you're using:

Create rounded borders with individual control for each corner

Create CSS shadows with real-time visual preview

Enjoyed this tool? Explore more!