Skip to content
Convertto

CSS Shape Generator

Generate triangles, arrows, stars and other shapes using pure CSS.

To create a CSS shape, pick one and adjust the size and colour. Triangles use the classic border trick, while stars, hexagons and arrows use clip-path polygons. Both approaches need no images and scale cleanly at any resolution.

Runs in your browser
Privacy
Runs entirely in your browser — nothing is uploaded
Cost
Free, unlimited, no sign-up

Frequently asked questions

How does the CSS triangle trick work?

An element with zero width and height still renders its borders, which meet at 45-degree diagonals. Making three borders transparent leaves one visible triangle. clip-path is more readable but the border trick has broader legacy support.

How to use the css shape generator

  1. 1Choose the shape.
  2. 2Choose the direction.
  3. 3Set the size.
  4. 4Pick the colour.
  5. 5The result appears immediately — copy or download it.

Embed this tool

Put the working css shape generator on your own site. It runs in your visitors' browsers exactly as it does here — free, no account, nothing uploaded.

Share this tool

Related tools

CSS Border Radius GeneratorDrag eight handles to shape every corner: elliptical radii, inverted corners and squircles.CSS Gradient GeneratorBuild linear, radial and conic CSS gradients and copy the code.CSS Clip Path GeneratorCut an element to a polygon, circle, ellipse or inset, and copy the clip-path.CSS Box Shadow GeneratorDesign a CSS box-shadow with live values for offset, blur, spread and colour.CSS Button GeneratorDesign a button and copy the CSS, including the hover, active and focus-visible states.Glassmorphism CSS GeneratorCreate frosted-glass CSS with backdrop blur, transparency and a subtle border.

Last updated

More css generators