CSS Triangle Generator with Live Preview
Generate pure-CSS triangles using the border trick — pick a direction, width, height and color, see a live preview, and copy the CSS. Runs 100% in your browser, no upload.
CSS triangle generator
Preview
.triangle {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 40px solid #3b82f6;
}🔒 Generated in your browser — nothing is uploaded.
What this CSS triangle generator does
Triangles in CSS are made without images by giving an element zero width and height and coloring just one of its borders. Because each border meets its neighbors on a diagonal, a thick colored border sitting next to two transparent borders renders as a triangle. Choose the direction it should point, set the base width and the height, pick a color, and this tool builds the exact declaration block for you and shows a live preview so you can confirm the shape before you copy it. Everything updates instantly as you type.
How the border trick works
The colored border is always the one opposite the direction the triangle points: an upward triangle colors its border-bottom, a downward triangle colors its border-top, and left/right triangles color the opposite side border. The two perpendicular borders are set to transparent, and their combined thickness controls the base of the triangle while the colored border controls its length. The width you enter is split across the two transparent borders and the height becomes the colored border, so the visible triangle matches the size you asked for.
Frequently asked questions
Why use borders instead of an image or SVG?
A CSS border triangle needs no extra file, scales crisply at any size, inherits color easily, and adds zero network requests. It is the lightest way to draw small arrows, tooltip pointers and dropdown carets directly in your stylesheet.
Can I change the triangle color with CSS later?
Yes. The color lives on a single border, so you can override it in a hover or dark-mode rule by setting that one border-color property — for example border-bottom-color for an upward triangle.
Is anything I enter uploaded to a server?
No. The direction, size, color and generated CSS are all computed locally in your browser with JavaScript. Nothing you type is sent, stored or uploaded anywhere.