Crosshair Generator

The preview is drawn on an HTML canvas, the same drawing surface browsers use for 2D games. Every time you move a slider, the tool clears the canvas and rebuilds the crosshair from four rectangles: a left, right, top, and bottom arm placed around the exact center point. The size slider controls how long each rectangle is, thickness controls its width, and gap controls how far each arm sits from the center. Choosing the T-style simply skips the top rectangle, and the circle style swaps the rectangles for a stroked ring.

The sliders use the same value ranges as the CS2 console settings, so the numbers you pick here transfer directly to the game. When you press the copy button, the tool builds a single line of console commands — cl_crosshairsize, cl_crosshairgap, cl_crosshairthickness, and the rest — from your current settings and places it on your clipboard. Your chosen color is converted from its hex value into the separate red, green, and blue values the game expects, and the opacity slider becomes the alpha value.

The outline option draws a slightly larger black shape behind each arm before the colored shape goes on top, which keeps the crosshair visible against both bright skies and dark corners. The PNG download redraws your design onto a transparent 256-pixel canvas and saves it as a file. Everything runs locally in your browser tab; no settings, images, or personal data leave the page.