clip.svgCreate CSS polygon clip paths visually, use ready-made shapes, edit points and preview the result with your own image
Clip Path Generator
Today
Point 1
Point 2
Point 3
Point 4
clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%);Just click on the desired shape
Basic shapes
Triangle up
Triangle down
Triangle left
Triangle right
Diamond
Pentagon
Hexagon
Octagon
Trapezoid
Parallelogram
Arrows & direction
Arrow right
Arrow left
Arrow up
Arrow down
Chevron right
Chevron left
Horizontal
Vertical
Interface
Heart
Message
Bookmark
Tag
Play
Home
Shield
Like
Symbols
Plus
Close
Check
Star
Bolt
Hourglass
Tools
Hammer
Sickle
Axe
Pickaxe
Shovel
Screwdriver
Wrench
Saw
Pliers
Weapons
Sword
Dagger
Spear
Battle axe
Mace
Bow
Arrow
War shield
Nature
Leaf
Flame
Drop
Mountain
Pine tree
Sun
Flower
Animals
Cat
Fish
Bird
Butterfly
Rabbit
Technology
Monitor
Phone
Battery
Chip
Cursor
WiFi
Transport
Plane
Rocket
Boat
Car
Food & drinks
Cup
Bottle
Apple
Pizza
Ice cream
Buildings
House
Castle
Tower
Factory
Signs & navigation
Warning
Location pin
Key
Lock
Flag
Gaming & fantasy
Crown
Gem
Trophy
Potion
Crystal
Space
Rocket
Planet
Satellite
Moon
Weather
Cloud
Lightning
Snowflake
Umbrella
Decorative
Burst
Ticket
Ribbon left
Ribbon right
Cut corners
Slant
Wave
Feedback