CSS Triangle Generator
Generate border-based CSS triangles.
Keep or share the finished result
Copy or share after running the tool. Saved tools and settings stay in this browser.
What would you like to do next?
Generate a CSS triangle
CSS triangles are useful for arrows, tooltips, labels and small UI pointers without image files. Choose a direction, size and color, then copy the border-based CSS. The preview updates instantly so you can tune the dimensions before using the snippet in a page or component.
Image-free UI arrows
The generated code uses a zero-size element with transparent borders and one colored border, a widely supported CSS pattern.
Frequently asked questions
Does this use SVG?
No. It uses CSS borders on a zero-size element.
Can I change the direction?
Yes. Choose up, down, left or right.
Can I use this in tooltips?
Yes. Add the generated CSS to a small pseudo-element or helper element.