Want a hexagon avatar or a triangle banner without drawing an image? The CSS Clip Path Generator gives you ready made clip-path code for nine common shapes. You pick a shape, copy the CSS, and paste it into your stylesheet.
This tool is for web developers and designers who want quick geometric shapes. The clip-path property hides part of an element so only your chosen shape shows. Every shape here is a fixed preset, so you get clean, tested code with one click.
Table of Contents
- What the Tool Does
- How to Use It, Step by Step
- How the Clip-Path Code Is Built
- Worked Example
- How to Read the Results
- The Nine Shape Presets
- Limitations and Assumptions
- FAQs About the CSS Clip Path Generator
What the Tool Does
The tool holds nine preset shapes and shows each one in a live preview box. Clicking a preset updates the preview, the code, and three small readouts at the top.
- Shape presets: triangle, trapezoid, rhombus, pentagon, hexagon, star, arrow, message bubble, and circle.
- Live preview: a colored box shows the clipped shape right away.
- Generated CSS Code: a read-only box with both the standard and the webkit prefixed property.
- Copy CSS: one button copies the code to your clipboard.
- Three readouts: Shape Type, Vertices Count, and Function.
The page opens on the hexagon preset. There are no sliders or point handles, so you cannot drag corners or type your own points.
How to Use It, Step by Step
- Look at the Shape Presets grid on the left.
- Click the shape you want, such as Star or Hexagon.
- Check the live preview box on the right to confirm the look.
- Read the Generated CSS Code box below the shapes.
- Press Copy CSS to send the code to your clipboard.
- Paste the code into the rule for the element you want to clip.
The copy step uses your browser clipboard. A short status line shows Copied to clipboard when it works. If the clipboard is blocked, the tool tries a fallback and tells you to copy by hand.
How the Clip-Path Code Is Built
There is no math here. Each preset stores a fixed clip-path value, and the tool wraps that value in two lines. One line is the standard property, and one is the webkit prefix for older Safari.
Chosen Preset+polygon() or circle() points=clip-path CSS
A polygon preset lists corner points as percent pairs. Each pair is an x and a y position inside the box. The circle preset uses a radius and a center instead of corner points.
Worked Example
Suppose Priya wants a hexagon badge for a team page. She clicks the Hexagon preset, which is also the default. The tool shows this exact output.
| Field | Value Shown |
|---|
| Shape Type | Hexagon |
| Vertices Count | 6 Vertices |
| Function | polygon() |
| Generated CSS | clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); |
The code box also repeats the same value as -webkit-clip-path on a second line. If Priya clicks Star instead, the Function stays polygon() and the Vertices Count reads 10 Vertices.
The circle preset is the only non polygon choice. It outputs clip-path: circle(50% at 50% 50%), which clips the box to a centered circle.
How to Read the Results
Shape Type names the preset you picked, such as Hexagon or Message Bubble. It is a label only and does not change the code.
Vertices Count shows how many points the polygon lists. For the circle it reads N/A, since a circle has no corners.
Function shows the CSS shape function in use, either polygon() or circle(). This tells you the shape family at a glance.
Generated CSS Code is the part you actually use. Copy both lines so older Safari browsers still clip the element.
The Nine Shape Presets
Each preset is a tested value, so you do not need to tune points by hand. The table below lists what the tool reports for every shape.
| Preset | Function | Vertices Count |
|---|
| Triangle | polygon() | 3 |
| Trapezoid | polygon() | 4 |
| Rhombus | polygon() | 4 |
| Pentagon | polygon() | 5 |
| Hexagon | polygon() | 6 |
| Star | polygon() | 10 |
| Arrow | polygon() | 7 |
| Message Bubble | polygon() | 7 |
| Circle | circle() | N/A |
Set a width and height on the clipped element so the percent points have room to work. The clip-path only hides pixels and does not change layout size.
For other visual effects, pair this with the CSS gradient builder to fill the shape with color. The box shadow maker adds depth, though clip-path can cut a shadow off at the shape edge.
Limitations and Assumptions
- The tool offers nine fixed shapes only. You cannot add points, drag corners, or type your own coordinates.
- It does not support ellipse, inset, or path based clip-paths, even though CSS allows them.
- The percent points assume a square or rectangular box. Odd box ratios can stretch a shape.
- Copy relies on your browser clipboard. If it is blocked, the tool falls back and shows a copy by hand message.
- The live preview box is a fixed square. A wide or tall element may clip differently on your page.
- A clip-path hides overflow but does not resize the element or affect nearby layout.
If you only need one triangle, a dedicated CSS triangle code generator may fit better. To rotate or skew the clipped box, add rules from the transform rule builder. You can also round plain boxes with the border radius helper. Browse more options in the developer tools hub.
FAQs About the CSS Clip Path Generator
Can I Edit the Shape Points By Hand?
No. The tool ships nine fixed presets with set points. To change points, copy the code and edit the percent values in your own stylesheet.
Why Are There Two Lines In the Output?
One line is the standard clip-path property. The second line is -webkit-clip-path, which older Safari versions still need for the same shape.
Does Clip-Path Change the Element Size?
No. It only hides the parts outside the shape. The box keeps its original width, height, and spot in the layout.
Will These Shapes Work In All Browsers?
Modern browsers support polygon and circle clip-paths well. Very old browsers may ignore the rule, so test on the browsers your visitors use.
Can I Use These Shapes On Images?
Yes. The clip-path property works on images and most block elements. Paste the same code into the image rule to clip it.
Can I Animate a Clip-Path Shape?
Yes, with your own CSS transitions or keyframes. This tool only outputs the static shape, so you add any motion rules yourself.
This calculator gives general estimates only and is not professional advice. Reviewed for general accuracy by Prof. Dr. Khalil Mudassar, PhD.