Arrow CSS Generator

Create custom arrows with CSS using this free online generator.
Adjust the direction, length, color, arrowhead size, thickness, border, and other design settings while checking the result with a real-time preview.
The required CSS code is generated automatically, so you can copy it and use it directly in your website or web project.

Customization

Reset

▼ Arrow Direction

top ▲

bottom ▼

left ◀︎

right ▶︎

▼ Total Length

px

▼ Arrow Color

Solid Color

Gradient

#000000

Arrow Head Size

Sizing Method:

Side Length: px

Angle: °

Base Length: px

Height: px

Shaft Size

▼ Shaft Thickness

px

Border

Advanced Settings

Preview

CSS Code

Copy Code

.arrow {
  display: inline-block;
  width: 100px;
  height: 73.5px;
  background: #000000;
  clip-path: polygon(0 31%, 63.2% 31%, 63.2% 0, 100% 50%, 63.2% 100%, 63.2% 69%, 0 69%);
}

Notes

• This tool is intended for modern browsers. Some generated CSS may not work in older browsers.
• This site uses modern-normalize.css. The preview may look slightly different depending on the reset CSS or other styles used in your project.