How to use the CSS Triangle Generator
- Click a direction — up, down, left, right or one of the corners.
- Set the width, height and color.
- Choose Borders (works everywhere, ideal for
::before/::afterarrows) or clip-path (easier to read, supports gradients). - Copy the CSS onto an element or pseudo-element.
Two ways to draw a triangle
The border trick: an element with zero width and height shows only its borders, and each border is a triangle meeting in the middle. Make three of them transparent and the fourth colored, and you get an arrow — no images needed. Its size comes from the border widths.
clip-path: a normal box with clip-path: polygon(50% 0, 100% 100%, 0 100%). Easier to read and size, and it can be filled with a gradient or image.
Tooltip arrow example
.tooltip { position: relative; }
.tooltip::after {
content: "";
position: absolute; top: 100%; left: 50%; margin-left: -8px;
border: 8px solid transparent;
border-top-color: #111;
}More shapes: Clip-path Generator, Border Radius Generator, SVG Blob Generator.
Also searched as: css triangle, css arrow, tooltip arrow css, border triangle css, css caret, triangle shape css, speech bubble arrow css.
Tools that pair well with the CSS Triangle Generator
- Box Shadow Generator — Stack multiple shadow layers, tweak offsets, blur, spread and opacity on a live card, then copy the box-shadow or text-shadow CSS.
- CSS Mask Generator — Make images and sections fade out instead of ending hard: fade one edge, top and bottom, all four edges, a radial vignette or a spotlight, cut the element into stripes — or mask it with a shape (star, heart, hexagon, arrow…) with soft, feathered edges that clip-path can’t do.
- CSS Grid Generator — Set the columns, rows and gap, then drag across cells to make areas like header, sidebar and main.
- CSS Animation Generator — Design CSS animations on a real keyframe timeline.
Frequently asked questions
How do I make a triangle in CSS?
Give an element width: 0 and height: 0, then set borders: for an up arrow, transparent left and right borders and a colored bottom border. This generator writes it for any direction and size.
How do I add an arrow to a tooltip?
Add a ::after pseudo-element with content: "", position it at the tooltip’s edge, and give it the triangle borders from the generator.
Border triangle or clip-path?
Borders work in every browser and are standard for tiny arrows on pseudo-elements; clip-path is easier to size and supports gradients.
Can a CSS triangle have a border or shadow?
Stack two triangles (one slightly larger in the border color), or use clip-path on a wrapper with filter: drop-shadow() for a shadow.
Can I install CSS Triangle Generator as a web app and use it offline?
Yes. CSS Triangle Generator is an installable web app (PWA) — installed from your browser, not downloaded from an app store. Click Install app at the top of this page in Chrome or Edge (Windows, macOS, Linux, ChromeOS) or on Android, use Share → Add to Home Screen on iPhone and iPad, or File → Add to Dock in Safari 17+ on a Mac. It then opens in its own window with its own icon, and because it runs entirely in your browser it keeps working offline. Firefox on desktop can’t install web apps. How installing works.