🎨

CSS Triangle Generator

css · triangle · border · arrow · shape

Size50pxColor

CSS

.triangle { border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:50px solid #3b82f6;width:0;height:0; display:inline-block; }

How to use

1
Pick a triangle direction.
2
Adjust the size and color.
3
Copy the generated CSS.

FAQ

Is this tool free?

Yes — no sign-up, no installation, completely free to use right away.

What is this tool?

Generate CSS triangles in any direction and copy the code. You can use it for free with no sign-up or installation — just open the page and start right away.