Arrow Generator

Create customizable CSS arrows for tooltips and pointers.

Arrow Settings

Direction

Size10px

Thickness2px

Color

Preview

Generated CSS & HTML

.arrow {
  position: relative;
  display: inline-block;
  width: 0;
  height: 0;
  
  
  border-top: 10px solid transparent;
  border-right: none;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #6366f1;
  
  
}

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS Arrow Generator?

Generate CSS chevron and arrow shapes using borders or transforms. Choose style, size, and weight, then copy the minimal CSS.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Arrow Generator

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Choose arrow style

Select chevron (border-based), filled triangle, or double arrow. Set the size and stroke weight.

Set direction and colour

Pick the pointing direction. Colour defaults to currentColor for automatic inheritance, or set a specific colour.

Copy the CSS

Click Copy to get the complete arrow CSS, ready to apply to a div or a pseudo-element.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

styles.css

/* Chevron arrow using rotate + border */
.arrow {
  display: inline-block;
  width: 12px; height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg); /* points right */
}
.arrow.down  { transform: rotate(45deg); }
.arrow.up    { transform: rotate(-135deg); }
.arrow.left  { transform: rotate(135deg); }
.arrow.right { transform: rotate(-45deg); }

currentColor inherits the text colour automatically, so the arrow adapts to any parent colour change.

Pro tips

Pro tips for better results

★

Use currentColor so arrows inherit text colour

currentColor in border colours means the arrow automatically matches whatever color: value is set on the element or its parent. One class works for all colour contexts.

★

Rotation classes are more maintainable than separate declarations

Define one base .arrow class and add directional modifier classes (.up, .down, .left, .right) that only set the transform. This avoids duplicating the full arrow declaration for each direction.

FAQ

Frequently asked questions

For chevrons and simple directional arrows, CSS is fine and avoids an extra file request. For complex iconography, SVG is more flexible (multiple colours, complex paths) and scales perfectly at any size.

No. Everything runs in your browser. Nothing is sent to a server.