Shape
Angled rectangle
Output
clip-path: polygon(...)
Design Tools
CSS Clip Path — Shape Generator
Generate CSS clip-path shapes from presets and simple controls with a live preview—useful for angled cards, badges, image crops, and decorative layouts.
CSSclip-pathShape
Favorite this tool
No favorite storage mode has been selected.
Quick actions
Copy this tool URL or open the system share sheet on a supported device.
设计配色
CSS Clip Path
Generate CSS clip-path shapes from presets and simple controls with a live preview—useful for angled cards, badges, image crops, and decorative layouts.
最终 CSS 属性
Use cases
- Build angled or irregular cards
- Crop an image display area
- Create decorative geometric shapes
How to use
- Choose a shape preset
- Adjust key parameters
- Preview and copy the CSS
Example input and output
FAQ
Does it support polygon?
Yes. It outputs clip-path values ready for CSS; many presets become polygon(...) forms.
How is older-browser support?
clip-path works well in modern browsers. Provide an unclipped fallback if you must support very old environments.
Tools
Related tools
Continue with another translated tool for a nearby task.
CSS Triangle Generator
CSS Triangle Generator with Live Preview
Choose a direction, size, and color to generate a pure CSS border triangle with a live preview and copyable code.
CSS Triangle Shape
SVG Path Visualizer
SVG Path Visualizer — Debug d Commands
Paste a long path d="M10 20 L... Z" string or a full path tag to visualize it on a grid and inspect length and command count while debugging icons.
Design SVG Path