Softonic

CSS Arrow Generator

Step 1 / 2
Next

Create a simple CSS arrow. Choose right, left, up or down, set a colour, size and border thickness, then copy the generated .arrow rule.

Create a CSS arrow

  1. 1

    Choose a direction

    Select right, left, up or down.

  2. 2

    Set the appearance

    Choose a colour, square size and border thickness in pixels.

  3. 3

    Copy the CSS

    Review the preview and copy the generated `.arrow` rule.

What the generator creates

The generator creates one square .arrow element. It uses display: inline-block, equal width and height, a right and bottom border in your chosen colour, and transform: rotate(...) for the four available directions.

It does not generate the zero-size border-triangle technique, clip-path, SVG, diagonal arrows, outlined arrows, gradients, tooltip tails, offsets, HTML snippets, or browser-compatibility advice. It also does not validate whether the rule fits your layout. Test the copied CSS in your own page.

Frequently Asked Questions

Right, left, up and down. The output rotates the same bordered square for each choice.

No. It produces only the simple bordered-square CSS rule shown in the editor.

No. It outputs only the CSS rule for one .arrow element.

Related Tools

ASCII Table Reference

Full ASCII table from 0 to 127 with decimal, hex, octal, binary, standard names and HTML numeric-reference notation, including NUL, LF and DEL.

HEX Color Picker

Pick or enter a HEX colour and get RGB, HSL, approximate CMYK, relative luminance and contrast ratios against white and black.

Color Palette Generator

Generate monochromatic, analogous, complementary, triadic or tetradic color palettes from a base HEX color and export copy-ready CSS variables.

HTML Character Reference

Searchable list of HTML entities, their named and numeric codes, and a one-click copy for special characters and symbols.

FPS Counter

Measure browser FPS with requestAnimationFrame, smoothing, min/max frame rate, warnings and an optional graph. Runs locally with no upload or API.

JSON Formatter

Paste JSON to pretty-print with 2 or 4 spaces, minify it to compact output, or run a quick syntax check before copying the result.