CSS Shape Generator

CSS Shape Generator provides 22 pure-CSS shapes organized into four categories — Basic, Polygons, Stars, and Symbols. Every shape uses either border-radius or clip-path: polygon(), so the generated code works on any <div>, <span>, or other block element. No images, no SVG, no canvas.

Select a shape from the visual picker, adjust width, height, and colour using the controls, see the live preview update instantly, and copy the CSS in one click. The picker buttons themselves are rendered using the generated CSS, so every thumbnail shows the actual shape.

The Basic category covers fundamental shapes via border-radius. The Polygon category produces triangles, pentagons, hexagons, octagons, trapezoids, and parallelograms. Stars includes 4-point, 5-point, and 6-point variants. Symbols covers a cross, right-arrow, chevron, price tag, and a heart.

• Category tabs — filter the shape picker to a specific group (All / Basic / Polygons / Stars / Symbols) to navigate faster.
• Shape picker — each button shows the actual CSS shape as a mini live preview using the current colour. Click to select.
• Colour — use the colour picker or click one of the 10 preset swatches below it. All shape thumbnails update simultaneously.
• Width & Height — drag to resize. Shapes that must be square (circle, diamond, stars, pentagon, etc.) automatically lock height to match width — the slider is disabled with an = Width label.
• Corner Radius — only visible when "Rounded Rect" is selected. Controls the border-radius value from 0 (sharp) to 80 px (near-pill).
• Click Copy CSS to copy the .shape {} rule. Paste it into your stylesheet and apply the class to an empty element.

Two CSS properties cover all 22 shapes in this tool:

• border-radius — used for Basic shapes. border-radius: 50% turns any rectangle into a circle or ellipse by rounding all four corners to half their respective dimension. border-radius: 9999px creates a pill (the radius is clamped to half the element's height). Custom values produce rounded rectangles.
• clip-path: polygon() — used for all other shapes. It defines a polygon mask using a list of x% y% points. The browser renders the element normally then clips it to the polygon boundary. Because the percentages are relative to the element's dimensions, the shape scales with width and height.

An important clip-path caveat: box-shadow is clipped along with the element — shadows appear to vanish on polygon shapes. Use filter: drop-shadow() instead (as this tool's preview does) — the filter renders the visual shadow around the clipped outline rather than the element box.

All polygon coordinates in this tool are percentage-based, which means shapes are resolution-independent and work at any element size. The polygon points were calculated trigonometrically for regular polygons (pentagon, hexagon, octagon, stars) and manually tuned for the symbols (heart, cross, arrow).