# 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.

**URL:** https://convertto.tech/t/css-shape-generator
**Category:** CSS Generators (https://convertto.tech/c/css-generators)
**Privacy:** Runs entirely in the browser; no upload
**Cost:** Free, no sign-up
**Last updated:** 2026-08-01

## Key facts

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

## How to use

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

## FAQ

### 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.

## Related tools

- [CSS Border Radius Generator](https://convertto.tech/t/border-radius-generator): Drag eight handles to shape every corner: elliptical radii, inverted corners and squircles.
- [CSS Gradient Generator](https://convertto.tech/t/gradient-generator): Build linear, radial and conic CSS gradients and copy the code.
- [CSS Clip Path Generator](https://convertto.tech/t/css-clip-path-generator): Cut an element to a polygon, circle, ellipse or inset, and copy the clip-path.
- [CSS Box Shadow Generator](https://convertto.tech/t/box-shadow-generator): Design a CSS box-shadow with live values for offset, blur, spread and colour.
- [CSS Button Generator](https://convertto.tech/t/css-button-generator): Design a button and copy the CSS, including the hover, active and focus-visible states.
- [Glassmorphism CSS Generator](https://convertto.tech/t/glassmorphism-generator): Create frosted-glass CSS with backdrop blur, transparency and a subtle border.
- [Blob Shape Generator](https://convertto.tech/t/blob-shape-generator): Design organic SVG backgrounds: four interpolation styles, gradients, layers and any canvas size.
- [Type Scale Generator](https://convertto.tech/t/type-scale-generator): Build a modular typographic scale and copy it as CSS custom properties.