FreeDev Tools

CSS Triangle Generator

Generate pure-CSS triangles with the border trick — any direction, size, and color.

.triangle {
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 80px solid #3b82f6;
}

Generated locally in your browser — nothing is uploaded.

How to Use

  1. 1

    Pick a direction

    Four sides or four corners.

  2. 2

    Set size and color

    Width, height, and fill color sliders.

  3. 3

    Copy the rule

    Zero-size element with the border trick applied.

Frequently Asked Questions

A zero-size element's borders meet at diagonals, so making three borders transparent and one colored leaves a triangle. Direction and proportions come from which borders you size — the generator does the arithmetic.

Related Tools

CSS Gradient GeneratorBuild linear and radial CSS gradients visuallyBox Shadow GeneratorCreate CSS box shadows with a live previewBorder Radius GeneratorGenerate CSS border-radius values visuallyFlexbox GeneratorBuild CSS flexbox layouts with a visual editorCSS Grid GeneratorBuild CSS grid layouts with a visual editorText Shadow GeneratorGenerate CSS text-shadow effects with live previewCSS Animation GeneratorCreate CSS keyframe animations with a live editorClip-Path GeneratorGenerate CSS clip-path polygon shapes visually