Crosshair generator

How to design a crosshair that works

This generator draws a classic four-arm crosshair on a 300 × 300 pixel canvas and saves it as a PNG with a transparent background. Every control updates the preview instantly, so move one slider at a time and watch what changes.

What each setting does

• Color: the fill colour of the arms and the dot. The default is bright green (#00ff00).
• Thickness (1–10 px): how wide each arm is. It also sets the size of the centre dot, which is drawn with a diameter equal to the thickness.
• Line length (0–50 px): how long each of the four arms is. Set it to 0 to hide the arms completely; with Center dot switched on, that gives you a dot-only crosshair.
• Center gap (0–30 px): the distance from the exact centre to where each arm begins. The empty space across the middle is therefore twice this value.
• Center dot: adds a round dot in the middle.
• Outline: draws a dark border, roughly 1 px on each side, behind the arms and dot so the crosshair stays visible against bright or busy backgrounds. It is on by default.

Step by step

1. Pick a colour that contrasts with the maps or scenes you usually see.
2. Set thickness first, then line length, then the gap.
3. Decide whether you want a centre dot and an outline.
4. Click Download transparent PNG. The file is saved as crosshair.png at 300 × 300 pixels with the crosshair centred.

Choosing values

A reasonable general starting point is thickness 2, length 6–10, gap 3–5 and outline on. Small, thin crosshairs with a modest gap cover less of the target and suit precise, tap-shooting styles. Longer arms and a wider gap are easier to spot in hectic fights but hide more of what you are aiming at. A dot on its own (length 0, dot on) suits players who think of aim as a single point.

For colour, saturated green, cyan, yellow or magenta tend to stand out on most backgrounds. Red and white can blend into muzzle flashes, sky, snow or damage effects in many games, but this depends on the game, so test a few options before settling.

Using it with your actual game

Games such as Counter-Strike 2, Valorant and Overwatch 2 have their own crosshair menus, and some support crosshair share codes. Those settings are entered inside each game, and their units do not match the pixel values here one-to-one. Treat this tool as a way to try out shapes and proportions, then recreate the look in the game's own options. Defaults and ranges can also change between game updates.

The PNG itself is most useful for stream overlays, thumbnails, video edits and games that accept a custom crosshair image. Be careful with third-party programs that draw a crosshair on top of a game: some competitive games, leagues and tournaments do not allow them, so check the rules first.

Tips and common mistakes

• Even thickness looks sharper. The arms are centred on the middle of the canvas, so odd thickness values (1, 3, 5) can come out slightly soft at the edges. Values such as 2 or 4 give crisp lines.
• Gap 0 with the outline on can leave dark marks in the middle where the arm outlines overlap. A gap of at least half the thickness avoids it.
• Judging size from the preview. Screen resolution and display scaling change how large a given number of pixels looks, so check the crosshair at the size it will actually be shown.
• Changing it constantly. Swapping crosshairs every session makes it harder to build consistency. Once it is visible and not distracting, keep it and spend the time on practice, for example with the aim trainer. If you are moving between games, the sensitivity converter helps keep your aim feeling the same.