CSS Triangle Generator
Generate a CSS triangle online for free using the border trick — pick direction, size and color, preview it live, and copy the code. Runs in your browser.
100% private — runs entirely in your browser. Your files never leave your device.
CSS triangles use the “border trick”: a zero-size box with transparent borders on the other sides. Great for tooltips, dropdown carets and arrows. Runs entirely in your browser.
How to use the CSS Triangle Generator
- Choose a direction.
- Set the size and color.
- See the live triangle.
- Copy the border-trick CSS.
What you can use it for
- Make tooltip and speech-bubble carets
- Create dropdown arrows
- Add ribbons and pointers
- Grab the CSS triangle border trick
More free tools
Styling a website?
Generate shadows, gradients, layouts and effects with our free CSS tools — copy the code and go.
Frequently asked questions
How does a CSS triangle work?
A zero-size element gets thick borders; making the side borders transparent leaves a solid triangle on one side — the classic 'border trick'.
What is it used for?
Tooltip and speech-bubble carets, dropdown arrows, ribbons and decorative pointers.
Can I point it diagonally?
Yes — corner directions are supported in addition to up, down, left and right.
Is it private?
Yes — the CSS is generated in your browser.