CSS Triangle Generator

Home/Tools/Triangle Generator

Generate pure CSS triangles using border techniques.

No sign-up neededRuns in your browserProduction-ready CSS

Triangle Settings

Direction

Size50px

Color

Preview

Generated CSS & HTML

.triangle {
  width: 0;
  height: 0;
  borderTop: 50px solid #6366f1;
  borderRight: 50px solid transparent;
  borderBottom: 50px solid transparent;
  borderLeft: 50px solid transparent;

Related Tools

Box Shadow Generator

Design complex box shadows with multiple layers, blur, spread, and color options.

Text Shadow Generator

Create eye-catching text shadows with multiple layers and effects.

Border Radius Generator

Fine-tune border radius for each corner with visual preview.