Custom Shape

Round Edges

The inset() shape optionally allows values similar to border-radius for rounded edges. This new feature may be buggy in your browser.

Prefix

webkit

Demo Width px

Demo Height px

Demo Background

Show Outside

to add points
to custom polygon.

Round Edges

The inset() shape optionally allows values similar to border-radius for rounded edges. This new feature may be buggy in your browser.

Custom Shape

CSS Code (Click Code to Copy)

-webkit-clip-path: ; clip-path: ;

CSS Clip-Path Generator is an online CSS visualization and code generate tool designed to simplify the process of creating custom shapes for web elements using the CSS clip-path property. This tool allows you to visually generate Custom and complex shapes, such as polygons, circles, and ellipses, without manually writing code. By providing an intuitive interface, users can adjust parameters, preview results in real-time, and export the corresponding CSS code for seamless integration into your projects.

The CSS clip-path property is a powerful feature that enables the clipping of an element to a specific shape or region. It supports basic shapes like circle, ellipse, polygon, or inset, as well as more complex polygons and even SVG paths. CSS Animations and transitions are possible with two or more clip-path shapes with the same number of points. This property is widely used for creating visually appealing designs, such as image masks, hover effects, and unique layouts, while maintaining clean and efficient code.

Libraries in Use

Clippy: https://github.com/bennettfeely/Clippy

Featured Tools

Featured tools that you might find useful.

Popular Tools

List of popular tools that users love and frequently use.

New Tools

The latest tools added to our collection, designed for you.

Topics

The tools grouped by topics to quickly find what you need.

Regular Expression Tester

Regular Expression Tester can define your own regular expression (regex) to search the input data with, optionally choosing from a list of pre-defined patterns.

CSS Box Shadow Generator

CSS Box Shadow Generator is an online CSS code generate tool for web developers and designers that simplifies the process of creating CSS box-shadow effects. It provides a graphical interface to customize box-shadow properties and allows you to visually adjust shadow settings, instantly generating the corresponding CSS code.

CSS Text Shadow Generator

CSS Text Shadow Generator is an online CSS code generate tool for web developers and designers that simplifies the process of creating CSS text-shadow effects. It provides a graphical interface to customize CSS text-shadow properties and allows you to visually adjust shadow settings, instantly generating the corresponding CSS code.

CSS Triangle Generator

CSS Triangle Generator is a free online CSS code generate tool for for web developers and designers to create custom triangles using pure CSS. It simplifies the process of generating triangles without the need for images or complex JavaScript and offers an intuitive interface for crafting CSS triangles tailored to your needs.