The Ultimate Collection of CSS-only Shapes
Pure CSS shapes made with a single-element, modern CSS and an optimized code. All the shapes are here, look no further!
Most of the shapes accept a gradient coloration. I know you want it!
- Heart
- Star
- Starburst
- Flower
- Triangle
- Rhombus
- Hexagon
- Octagon
- Polygon
- Parallelogram
- Trapezoid
- Slanted Edge
- Scooped Corners
- Beveled Corners
- Curved Edge
- Rounded Edge
- Inverted Radius
- Inner Curve/Notch
- Scalloped box
- Stamp
- Zig-Zag Edge
- Wavy Edge
- Wavy box
- Zig-Zag box
- Zig-Zag Line
- Wavy Line
- Wiggly Box
- Pointy Box
- Circle Cut
- Triangle Cut
- Curved Rectangle
- Folded Rectangle
- CSS is CoolRibbon
- Breadcrumb
- CSS-only shapesTooltip/Speech Bubble
with single-element
and optimized code - CSS is The BestRounded Tab
- Arrow
- Arc
- Sector
- CSS is The BestVertical Rounded Tab
- Corner-only borders
- 100%Dashed Circle
CSS - Grid Lines
- Rounded Dashes
- Chevron
- Plus
- Cross
- Minus
- Lollipop
- Wavy Circle
- Squircle
- Blob Shape
- 3D Zig-Zag Edge
- Sphere
- Cube/3D Box
- Matrix of Cubes
- Circle Divider
- Triangle Divider
- Sparkle
- Random Wavy Edge
- Battery
- Hamburger Menu
- Signal
- Wifi Icon
- Spiral
- Infinity
- Pixelated Corners
- Film Strip
- Piece of Puzzle
- Pin
- Cloud
- Thunder
- Pencil
- Yin-Yang
-
Pacman
-
Batman
-
One Piece