CSS

CSS Shape Generator

A library of 30+ ready-to-paste CSS shapes -- triangles, polygons, stars, arrows, speech bubbles, crosses and more -- as clip-path CSS, with size, fill, rotation and flip controls, a click-to-pick shape gallery, and export to plain CSS, Tailwind or a React style object.

What this tool does

A visual gallery of 35+ ready-made shapes, each a pure clip-path value with no image file and no extra DOM element needed — click a shape to select it, then adjust size, colour, rotation and flip, and copy the finished CSS.

The shape library

Triangles in every direction, a full run of regular polygons from pentagon through decagon, cut-corner and beveled rectangles, three star styles, arrows and chevrons in both directions, a cross, a speech bubble, a message tail, a lightning bolt, and rounded shapes like a squircle and a pill — each rendered as a live thumbnail in the gallery so the right shape can be found by eye rather than by guessing a name.

Sizing, colour, rotation and flip

Width and height (optionally locked to a square), fill colour, rotation in degrees, and independent horizontal/vertical flip are all combined into the final transform and clip-path — a rotated, flipped arrow or a resized star, not just the shape at its default orientation.

Why clip-path over an image

Every shape scales cleanly at any size with no pixelation, works on any element (a div, a button, an image), and can have its fill colour changed instantly — none of which is true of a shape baked into a PNG or SVG file.

Getting the CSS out

Export as plain CSS, a Tailwind arbitrary-value class string, or a React style object, copyable with one click.

Privacy

Everything runs locally in your browser -- nothing you build is sent to a server.

FAQ

Frequently asked questions

Is my data uploaded anywhere?

No. The shape is built and rendered entirely in the browser -- nothing is sent to a server.

Are these shapes images, or real CSS?

Real CSS -- every shape is a clip-path value, so it scales cleanly at any size with no pixelation, works on any element, and its fill colour can be changed instantly, unlike a shape baked into an image file.

How many shapes are in the gallery?

35+ -- triangles, a full run of regular polygons, cut-corner and beveled variants, stars, arrows, chevrons, a cross, a speech bubble, a lightning bolt, and rounded shapes like a squircle and a pill, each shown as a live thumbnail.

Can I rotate or flip a shape?

Yes -- rotation in degrees and independent horizontal/vertical flip are both available, combined into the transform applied alongside the clip-path.

Can the width and height be different, for a non-square shape?

Yes -- width and height are independent by default, or can be locked together to keep the shape square while resizing.

What export formats are available?

Plain CSS, a Tailwind arbitrary-value class string, or a React style object -- selectable from a dropdown next to the code output.