Create pure CSS arrows for tooltips, dropdowns and callouts. Choose a direction, size and colour below to see a live preview and copy the CSS.
CSS Arrow Generator
How to Use
- Choose the arrow direction.
- Set the size in pixels and pick a colour.
- Preview the arrow live on the page.
- Copy the CSS and add the .arrow class to your element.
Key Features
- Pure CSS arrows, no images.
- Four directions with live preview.
- Custom size and colour.
- Runs entirely in your browser.
- Free with no sign-up.
FAQs
How does a CSS arrow work?
It uses the border trick: a zero-size box with three transparent borders and one coloured border forms a triangle.
Can I use this in tooltips?
Yes, CSS arrows are commonly used for tooltip pointers, dropdown carets and speech bubbles.
Will it scale on retina screens?
Yes, because the arrow is drawn with CSS it stays sharp at any resolution.