</>
cssgenerators.dev
Star on GitHub
Tools / Arrow

CSS Arrow Generator

Generate CSS chevron arrows pointing in any of 8 directions. Pure CSS using border-top + border-right + transform.

Direction
Size28px
Thickness4px
Border radius2px
#22d3ee
CSS
.arrow {
  width: 28px;
  height: 28px;
  border-top: 4px solid #22d3ee;
  border-right: 4px solid #22d3ee;
  border-radius: 2px;
  transform: rotate(45deg);
}

CSS generated is free to use — no attribution required.

How do CSS arrows work?

A CSS chevron arrow uses two borders on a square element — border-top and border-right — then rotates the element with transform: rotate() to point in the desired direction.

What are the CSS arrow direction rotation angles?

Right: rotate(45deg). Down: rotate(135deg). Left: rotate(225deg). Up: rotate(315deg). Diagonal arrows use 0°, 90°, 180°, 270°.

How do you style a CSS arrow?

Add border-radius: 2px to the corners for a slightly rounded, modern chevron. Use transition: transform 0.2s ease to animate direction changes on hover.

How do you create filled CSS arrow shapes with clip-path?

For filled arrow shapes (not just outlines), use clip-path: polygon(). See the clip path generator for arrow and chevron polygon presets.

From the blog
CSS clip-path Guide: shapes and hover animations →
Other CSS Tools
TriangleClip PathSpeech BubbleBorder