CSS Triangle Generator

Direction

Color

Base width

Controls the triangle base; left/right borders are half of this.

Height

Controls the triangle height.

Generated CSS

width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 120px solid #ff7e5f;

Preview

Similar CSS Tools

View All

CSS Gradient Generator

Visually build linear or radial gradients, preview and copy CSS code.

→

CSS Cubic Bezier Generator

Adjust control points and duration, preview easing and copy the CSS.

→

CSS Box Shadow Generator

Design soft or sharp shadows for cards, avatars, or headers, then copy the CSS.

→

Triangle Generator Guide

What it does

Generate CSS-only triangles for tooltips, arrows or pointers. Choose direction, color, and size—then copy the ready-to-use CSS.

How to use

Pick a direction (up, down, left, right) to orient the triangle.
Choose a color via the color picker or paste a HEX code.
Adjust size with the number field or slider until it fits your design.
Preview updates in real time; copy the CSS snippet when satisfied.
Paste the CSS into your stylesheet and add the triangle class to your element.

Tips

Use relative sizing (e.g., rem) by converting the px values after copying. Keep triangles small for subtle pointers; larger sizes work well for banners or hero accents.

FAQ

Notes

Keep triangle size reasonable (10-200px) to avoid dominating layouts.
When rotating, set transform-origin to the tip for predictable positioning.
Match triangle color with the attached element background for seamless look.
Use high-contrast colors if the triangle is used as an indicator on varied backgrounds.

Tools Navigation