What's the difference between the two methods?

The border trick uses transparent borders and works everywhere; clip-path is more flexible and keeps a real element box.

Can I point the triangle in any direction?

Up, down, left, and right are supported directly.

Can I change the color?

Yes, pick any color with the color picker.

Is my data uploaded to a server?

No. This tool runs entirely in your browser using standard web APIs, so your input never leaves your device and nothing is logged or stored on our servers.

Does it work offline and on mobile?

Yes. Once the page has loaded it keeps working without a network connection, and the layout is responsive so it stays usable on phones and tablets.

CSS Triangle Generator

Generate arrow and triangle shapes with borders or clip-path.

Support

Works Offline

Privacy First

No Login

No API

Options

Method

Direction

Size: 50px

Color

Preview

CSS output

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #6366f1;
}

About the CSS Triangle Generator

Create CSS triangles and arrows pointing up, down, left, or right using either the classic border trick or a modern clip-path polygon. Adjust size and color and copy the ready-to-use CSS.

Examples

Up arrow

border trick, up, 50px

Output

.triangle { border-bottom: 50px solid #6366f1; }

Keyboard shortcuts

Copy the main outputCtrl / ⌘ + Shift + C
Download the resultCtrl / ⌘ + S
Share this toolCtrl / ⌘ + Shift + S
Reset the inputsAlt + R
Open the tool search paletteCtrl / ⌘ + K

Related tools

Border Radius Generator

HTML & CSS

Fine-tune per-corner border radii visually.

Box Shadow Generator

HTML & CSS

Layer multiple box-shadows with a live preview.

Clip Path Generator

HTML & CSS

Design polygon clip-path shapes with a live preview.

CSS Animation Generator

HTML & CSS

Build keyframe animations visually with a live preview.

CSS Filter Playground

HTML & CSS

Tune blur, brightness, contrast, and more with a live preview.

CSS Gradient Generator

HTML & CSS

Design linear, radial, and conic gradients visually.

Frequently asked questions

Comments

No login needed. Comments appear after a quick review.

Loading comments…

Version 1.0.0 · Updated 2026-08-06 · Runs entirely in your browser