Triangle Generator

Create CSS triangles of any size and color

Generate CSS triangles using borders or clip-path.

Direction

Size: 40px

Color

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

More browser-based utilities in this collection

Generate CSS gradient backgrounds

Generate CSS background image code

Generate CSS blur filter effects

Generate CSS border-image properties

Generate CSS border-radius properties

Generate CSS border properties

Generate CSS box-shadow effects

Generate CSS brightness filters

Related Tools in CSS Styling & Layout Generators