CSS Triangle Generator
Make a triangle with the classic border trick — no images. Choose the direction, size and colour, preview it live, and copy the CSS. Handy for tooltips, carets and dropdown arrows. Runs in your browser.
- 100% free
- Private & safe
- Runs in your browser
Why use CSS Triangle Generator?
CSS Triangle Generator is a quick, no-nonsense developer utility that runs entirely client-side, so your code and data never leave your machine.
- Runs instantly in your browser — nothing to install, nothing uploaded.
- Completely free, with no account, no watermarks and no usage limits.
- Output: CSS using the border technique
- Pick the direction the triangle points.
- Works on any device — desktop, tablet and phone — and is fully keyboard accessible.
How to use CSS Triangle Generator
- Pick the direction the triangle points.
- Set the size and colour.
- Preview the triangle live.
- Copy the CSS (uses the border technique).
Examples
- A tooltip caret.
- A dropdown arrow indicator.
Supported formats & limits
- Output: CSS using the border technique
Limitations
- Solid-colour triangles; gradients need a different approach.
Frequently asked questions
Why does it use borders?
The border trick creates a triangle with zero width/height and transparent sides — a lightweight, image-free technique.
Can it be a gradient?
Not with this method; use clip-path for gradient triangles.
Uploaded?
No — generated locally.
Was this tool helpful?
Related tools
CSS Box Shadow GeneratorCraft CSS box-shadows with offset, blur, spread, colour and inset — live preview.CSS Border Radius GeneratorSet each corner radius independently and copy the CSS, with a live preview.CSS Gradient GeneratorDesign linear and radial CSS gradients with a live preview and copy the code.CSS FormatterBeautify and indent minified or messy CSS.