CS2 Crosshair Generator: Live Preview & Share Code

Free CS2 crosshair generator: dial in your crosshair with a live preview, then copy the exact share code to paste into CS2’s Settings > Crosshair menu, or grab the raw console commands for your autoexec.cfg. Paste any existing share code into the box below to load and tweak it.

(function(){ 'use strict'; // ---- Ported from akiver/csgo-sharecode (MIT licensed), verified against the // CS2/CS:GO crosshair share-code spec: 15-byte structure with a sum-mod-256 // checksum in byte[0], encoded via a 58-char custom dictionary (base61-style, // visually-unambiguous alphabet) into the CSGO-xxxxx-... share code format. var DICTIONARY = 'ABCDEFGHJKLMNOPQRSTUVWXYZabcdefhijkmnopqrstuvwxyz23456789'; var DICTIONARY_LENGTH = BigInt(DICTIONARY.length); var SHARECODE_PATTERN = /^CSGO(-?[w]{5}){5}$/; function bytesToHex(bytes) { return bytes.map(function(b){ return ('0' + (b & 0xff).toString(16)).slice(-2); }).join(''); } function stringToBytes(str) { var bytes = []; for (var i = 0; i < str.length; i += 2) bytes.push(parseInt(str.slice(i, i + 2), 16)); return bytes; } function uint8ToInt8(n) { return (n <> 24; } function sumArray(arr) { return arr.reduce(function(a,b){ return a+b; }, 0); } function shareCodeToBytes(shareCode) { if (!shareCode.match(SHARECODE_PATTERN)) throw new Error('Invalid share code'); shareCode = shareCode.replace(/CSGO|-/g, ''); var chars = Array.from(shareCode).reverse(); var big = BigInt(0); for (var i = 0; i < chars.length; i++) { big = big * DICTIONARY_LENGTH + BigInt(DICTIONARY.indexOf(chars[i])); } var str = big.toString(16).padStart(36, '0'); return stringToBytes(str); } function bytesToShareCode(bytes) { var hex = bytesToHex(bytes); var total = BigInt('0x' + hex); var chars = ''; for (var i = 0; i > 4) & 8) === 8, fixedCrosshairGap: uint8ToInt8(bytes[9]) / 10, color: bytes[10] & 7, outlineEnabled: (bytes[10] & 8) === 8, innerSplitAlpha: (bytes[10] >> 4) / 10, outerSplitAlpha: (bytes[11] & 0xf) / 10, splitSizeRatio: (bytes[11] >> 4) / 10, thickness: bytes[12] / 10, centerDotEnabled: ((bytes[13] >> 4) & 1) === 1, deployedWeaponGapEnabled: ((bytes[13] >> 4) & 2) === 2, alphaEnabled: ((bytes[13] >> 4) & 4) === 4, tStyleEnabled: ((bytes[13] >> 4) & 8) === 8, style: (bytes[13] & 0xf) >> 1, length: bytes[14] / 10 }; } function encodeCrosshair(c) { var bytes = [ 0, 1, Math.round(c.gap * 10) & 0xff, Math.round(c.outline * 2), c.red, c.green, c.blue, c.alpha, (c.splitDistance & 7) | (Number(c.followRecoil) << 7), Math.round(c.fixedCrosshairGap * 10) & 0xff, (c.color & 7) | (Number(c.outlineEnabled) << 3) | (Math.round(c.innerSplitAlpha * 10) << 4), Math.round(c.outerSplitAlpha * 10) | (Math.round(c.splitSizeRatio * 10) << 4), Math.round(c.thickness * 10), (c.style << 1) | (Number(c.centerDotEnabled) << 4) | (Number(c.deployedWeaponGapEnabled) << 5) | (Number(c.alphaEnabled) << 6) | (Number(c.tStyleEnabled) < 0) { ctx.fillStyle = 'rgba(0,0,0,0.85)'; var o = c.outline * scale * 0.5; ctx.fillRect(x - o, y - o, bw + o*2, bh + o*2); } ctx.fillStyle = color; ctx.fillRect(x, y, bw, bh); } if (length > 0) { // right bar(cx + gap, cy - thickness/2, length, thickness); // left bar(cx - gap - length, cy - thickness/2, length, thickness); // bottom bar(cx - thickness/2, cy + gap, thickness, length); // top (skipped entirely for T-style) if (!c.tStyleEnabled) { bar(cx - thickness/2, cy - gap - length, thickness, length); } } if (c.centerDotEnabled) { var dotSize = Math.max(2, thickness); bar(cx - dotSize/2, cy - dotSize/2, dotSize, dotSize); } } function refresh() { var c = readState(); try { var code = encodeCrosshair(c); sharecodeEl.textContent = code; convarsEl.textContent = crosshairToConVars(c).trim(); errorEl.textContent = ''; } catch (e) { errorEl.textContent = 'Could not generate code: ' + e.message; } drawPreview(c); } // Wire up live value labels + refresh on every input. ['x-length','x-thickness','x-gap','x-outline','x-alpha','x-fixed-gap','x-split-dist','x-split-ratio','x-inner-alpha','x-outer-alpha'].forEach(function(id){ var input = el[id]; var label = document.getElementById('wl-' + id + '-val'); function update() { if (label) label.textContent = input.value; refresh(); } input.addEventListener('input', update); }); ['x-style','x-tstyle','x-outline-en','x-color','x-alpha-en','x-dot','x-recoil','x-deployed-gap'].forEach(function(id){ el[id].addEventListener('input', refresh); el[id].addEventListener('change', refresh); }); document.getElementById('wl-xhair-advanced-toggle').addEventListener('click', function(){ var panel = document.getElementById('wl-xhair-advanced'); var open = panel.classList.toggle('open'); this.textContent = (open ? '− Hide' : '+ Show') + ' dynamic / split crosshair settings'; }); document.querySelectorAll('.wl-xhair-preview-bg-toggle button').forEach(function(btn){ btn.addEventListener('click', function(){ document.querySelectorAll('.wl-xhair-preview-bg-toggle button').forEach(function(b){ b.classList.remove('active'); }); this.classList.add('active'); bgColor = this.getAttribute('data-bg'); refresh(); }); }); function copyText(text, btn) { navigator.clipboard.writeText(text).then(function(){ var original = btn.textContent; btn.textContent = 'Copied!'; btn.classList.add('copied'); setTimeout(function(){ btn.textContent = original; btn.classList.remove('copied'); }, 1500); }); } document.getElementById('wl-xhair-copy-code').addEventListener('click', function(){ copyText(sharecodeEl.textContent, this); }); document.getElementById('wl-xhair-copy-convars').addEventListener('click', function(){ copyText(convarsEl.textContent, this); }); document.getElementById('wl-xhair-import-btn').addEventListener('click', function(){ var input = document.getElementById('wl-xhair-import-input').value.trim(); if (!input) return; try { var decoded = decodeCrosshairShareCode(input); applyState(decoded); refresh(); errorEl.textContent = ''; } catch (e) { errorEl.textContent = 'Could not load that code: ' + e.message; } }); refresh(); })();