CSS Arrow Generator
Make an arrow in pure CSS and copy the code. Pick a chevron, a double chevron, a line arrow with an open head, a filled block arrow or a double-headed arrow, point it in any of 8 directions, and set the length, head size and thickness in pixels. Add rounded ends, use the text colour, or make it nudge, slide or pulse, with a reduced-motion fallback built in. The preview frames render exactly the code you copy, on a light and a dark background. Every arrow also comes as inline SVG, and curved arrows are SVG only.
100% private — everything runs in your browser. The arrow is drawn in your browser; nothing is uploaded and nothing is stored.
Light background
Dark background
Arrow
Motion
Code
Runs in your browser with our own code: nothing is uploaded or saved. The preview frames show the exact code you copy, with no extra styles. You may use what you make here, including commercially, with no credit needed.
How to make an arrow in CSS
- Choose an arrow type and a direction.
- Set the length, head size and thickness with the sliders or type the pixels.
- Pick a colour, or tick Use the text colour so the arrow follows the text around it.
- Add rounded ends or an animation if you want them.
- Set a class name and, if the arrow carries meaning, a label for screen readers.
- Copy the HTML and CSS, or the inline SVG.
What you can use it for
- Next and previous arrows on carousels and pagination
- Dropdown and accordion chevrons
- Scroll-down cues on a hero section
- Arrows in buttons and links
- Step-by-step diagrams and flow arrows
- Breadcrumb separators
Arrow types and how the CSS draws them
| Type | How it is drawn | Output | Default size |
|---|---|---|---|
| Chevron (border) | Two borders of a square, turned 45° and centred | HTML + CSS, and the same arrow as SVG | 25 × 40 px |
| Double chevron (border) | Two bordered squares in ::before and ::after, one behind the other | HTML + CSS, and the same arrow as SVG | 37 × 40 px |
| Line arrow with open head (border) | A bar in ::before for the shaft, a bordered square in ::after for the head | HTML + CSS, and the same arrow as SVG | 120 × 40 px |
| Block arrow (clip-path) | One element cut to a 7-point polygon | HTML + CSS, and the same arrow as SVG | 120 × 48 px |
| Double-headed arrow (clip-path) | One element cut to a 10-point polygon | HTML + CSS, and the same arrow as SVG | 120 × 48 px |
| Curved arrow (SVG only) | One SVG path: a cubic curve and an open head | Inline SVG only | 132 × 114 px |
Border arrows put their pieces in ::before and ::after, so the HTML is a single empty span. Sizes are for the default settings.
Directions
| Direction | Angle | Border arrows | Clip-path arrows |
|---|---|---|---|
| Right | 0° | none | turned polygon, no transform |
| Down right | 45° | rotate(45deg) first | turned polygon, no transform |
| Down | 90° | rotate(90deg) first | turned polygon, no transform |
| Down left | 135° | rotate(135deg) first | turned polygon, no transform |
| Left | 180° | rotate(180deg) first | turned polygon, no transform |
| Up left | 225° | rotate(225deg) first | turned polygon, no transform |
| Up | 270° | rotate(270deg) first | turned polygon, no transform |
| Up right | 315° | rotate(315deg) first | turned polygon, no transform |
Angles run clockwise from pointing right, the way CSS rotate() turns on screen.
Chevrons, centred properly
A turned square does not sit where you expect: its corner points out, and the arms leave a gap on the other side. The generator moves each chevron back by half its own width before turning it, and sizes the element to the turned shape, so a chevron lines up in a button or next to text without margin tweaks.
.arrow::before {
transform: translate(-50%, -50%) rotate(90deg) translateX(-9.9px) rotate(45deg);
}Read the transform from right to left: turn 45° to make the chevron, move it back to centre it, then turn it to the direction you picked.
Accessibility and motion
- Decorative arrows are hidden from screen readers with aria-hidden=“true”.
- An arrow that carries meaning gets role=“img” and your label, and the SVG gets a matching title.
- Animations stop when the visitor’s device asks for reduced motion.
- Arrows inside links and buttons are not focusable on their own; the link or button keeps the focus.
Related tools
- Solid triangles and tooltip carets: CSS Triangle Generator.
- Arrow characters to paste into text: Arrow Symbols.
- Any polygon shape: Clip Path Generator.
- A bubble with a pointer: Speech Bubble Maker.
- Longer keyframe sequences: CSS Animation Generator.
More free CSS tools
Building an interface?
Triangles, clip-path shapes, buttons, shadows and keyframe animations: free generators that run in your browser, with no sign-up.
Frequently asked questions
How do you make an arrow with CSS?
The usual way is an empty element with two borders, turned 45° so the corner points the way you want: that gives a chevron. For a full arrow, a bar makes the shaft and a bordered square in a pseudo-element makes the head. A filled arrow can be cut from one element with clip-path: polygon(). This generator writes all three.
What is the difference between a CSS arrow and a CSS triangle?
A triangle is a solid wedge made with the border trick, often used as a tooltip caret. An arrow here has a shaft and a head, or is an open chevron. For carets, the CSS Triangle Generator on this site is the right tool.
How do I change the direction?
Pick one of the eight directions. Border arrows add rotate() in front of their own transform. Clip-path arrows get a turned polygon, so they need no transform at all.
Why is the element bigger than the arrow I drew?
It isn’t: the element is sized to fit the turned arrow, so it lines up with text and does not overlap its neighbours. The size shows under the preview.
Can I make the arrow follow the text colour?
Yes. Tick Use the text colour and the code uses currentColor with no colour of its own, so the arrow takes the colour of the link or button it sits in, including on hover.
How do I animate a CSS arrow?
Choose Nudge, Slide and fade, or Pulse. The code moves the arrow with the translate and scale properties, so the rotation stays intact, and a prefers-reduced-motion rule switches the animation off for people who ask for less motion.
Should I use CSS or SVG for an arrow?
Either works. CSS needs no extra markup beyond one empty element. Inline SVG scales cleanly, keeps the exact stroke, and can be a curve. Both versions of the same arrow are given, so you can pick.
Is the arrow accessible?
A decorative arrow gets aria-hidden=“true” so screen readers skip it. If the arrow is the only sign of what a control does, type a label: the code then uses role=“img” and an aria-label, and the SVG gets a title.
Do I need a library or an icon font?
No. The CSS and SVG have no imports, fonts or external files.
Which browsers support it?
Borders and transforms work everywhere. clip-path: polygon() and the separate translate and scale properties used for animation are supported in current versions of Chrome, Edge, Firefox and Safari.
Can I change the class name?
Yes. Type any class name and the HTML and CSS update together, including the animation keyframes.
Are rounded corners possible on block arrows?
Rounded ends apply to the border types. clip-path polygons keep sharp corners; use the SVG version and add stroke-linejoin round if you need soft corners on a filled arrow.