Valorant Crosshair Generator: Live Preview & Code

Free Valorant crosshair generator: build your crosshair with a live preview, then copy the exact import code to paste into Valorant’s Settings > Crosshair > Import Profile Code. Paste any existing code into the box below to load and tweak it. This tool covers your primary weapon crosshair; ADS and sniper-scope dot settings aren’t included yet.

Not sure where to start? Browse our Top 20 Valorant Pro Crosshair Codes and import one to tweak here.

(function(){ 'use strict'; // ---- Ported from genesy/crosshair-codes (MIT licensed), validated against a // real community-published crosshair code before use. Scoped to the primary // crosshair only (no ADS/sniper sections): see the in-tool note. var DEFAULTS = { color: 0, customColor: 'FFFFFF', outlines: true, outlineThickness: 1, outlineOpacity: 0.5, centerDot: false, centerDotThickness: 2, centerDotOpacity: 1, overrideFiringError: false, inner: { show: true, opacity: 0.8, length: 6, vertical: 6, lengthNotLinked: false, thickness: 2, offset: 3, movementError: false, movementErrorMult: 1, firingError: true, firingErrorMult: 1 }, outer: { show: true, opacity: 0.35, length: 2, vertical: 2, lengthNotLinked: false, thickness: 2, offset: 10, movementError: true, movementErrorMult: 1, firingError: true, firingErrorMult: 1 } }; function encodePrimary(s) { var parts = ['0', 'P']; function kv(k, v) { parts.push(k, String(v)); } kv('c', 8); kv('u', s.customColor.length === 6 ? s.customColor + 'FF' : s.customColor); kv('h', s.outlines ? 1 : 0); if (s.outlines) { kv('t', s.outlineThickness); kv('o', s.outlineOpacity); } kv('d', s.centerDot ? 1 : 0); if (s.centerDot) { kv('z', s.centerDotThickness); kv('a', s.centerDotOpacity); } kv('m', s.overrideFiringError ? 1 : 0); ['inner','outer'].forEach(function(which){ var prefix = which === 'inner' ? '0' : '1'; var l = s[which]; kv(prefix+'b', l.show ? 1 : 0); if (l.show) { kv(prefix+'t', l.thickness); kv(prefix+'l', l.length); kv(prefix+'o', l.offset); kv(prefix+'a', l.opacity.toFixed(3)); kv(prefix+'f', l.firingError ? 1 : 0); if (l.firingError) kv(prefix+'e', l.firingErrorMult); kv(prefix+'m', l.movementError ? 1 : 0); if (l.movementError) kv(prefix+'s', l.movementErrorMult); } }); return parts.join(';'); } function decodePrimary(code) { var s = JSON.parse(JSON.stringify(DEFAULTS)); var parts = code.split(';'); var pIndex = parts.indexOf('P'); if (pIndex === -1) return s; var stopAt = parts.length; ['A','S','NAME'].forEach(function(marker){ var idx = parts.indexOf(marker, pIndex + 1); if (idx !== -1 && idx < stopAt) stopAt = idx; }); var kvPairs = parts.slice(pIndex + 1, stopAt); for (var i = 0; i < kvPairs.length; i += 2) { var key = kvPairs[i], value = kvPairs[i+1]; if (value === undefined) continue; if (key.length === 2 && (key[0] === '0' || key[0] === '1')) { var line = key[0] === '0' ? s.inner : s.outer; applyLineKey(line, key[1], value); } else { applyPrimaryKey(s, key, value); } } return s; } function applyPrimaryKey(s, key, value) { switch(key) { case 'c': s.color = +value; break; case 'u': s.customColor = value.replace(/FF$/,'').padEnd(6,'0').slice(0,6); s.color = 8; break; case 'h': s.outlines = !!+value; break; case 't': s.outlineThickness = +value; break; case 'o': s.outlineOpacity = +value; break; case 'd': s.centerDot = !!+value; break; case 'z': s.centerDotThickness = +value; break; case 'a': s.centerDotOpacity = +value; break; case 'm': s.overrideFiringError = !!+value; break; } } function applyLineKey(line, key, value) { switch(key) { case 'b': line.show = !!+value; break; case 'a': line.opacity = +value; break; case 'l': line.length = +value; break; case 'v': line.vertical = +value; break; case 'g': line.lengthNotLinked = !!+value; break; case 't': line.thickness = +value; break; case 'o': line.offset = +value; break; case 'm': line.movementError = !!+value; break; case 's': line.movementErrorMult = +value; break; case 'f': line.firingError = !!+value; break; case 'e': line.firingErrorMult = +value; break; } } // ---- UI wiring ---- var ids = ['v-color','v-dot','v-dot-thick','v-dot-opacity','v-outline','v-outline-thick','v-outline-opacity', 'v-in-show','v-in-length','v-in-thickness','v-in-offset','v-in-opacity','v-in-firing','v-in-moving', 'v-out-show','v-out-length','v-out-thickness','v-out-offset','v-out-opacity','v-out-firing','v-out-moving']; var el = {}; ids.forEach(function(id){ el[id] = document.getElementById('wl-' + id); }); var canvas = document.getElementById('wl-val-canvas'); var ctx = canvas.getContext('2d'); var codeEl = document.getElementById('wl-val-code'); var errorEl = document.getElementById('wl-val-error'); var bgColor = '#1a2530'; function hexToRgb(hex) { var m = /^#?([a-fd]{2})([a-fd]{2})([a-fd]{2})$/i.exec(hex); return m ? { r: parseInt(m[1],16), g: parseInt(m[2],16), b: parseInt(m[3],16) } : { r:0,g:255,b:0 }; } function rgbToHex(r,g,b) { return '#' + [r,g,b].map(function(v){ return ('0'+v.toString(16)).slice(-2); }).join(''); } function readState() { var rgb = hexToRgb(el['v-color'].value); var customColor = [rgb.r,rgb.g,rgb.b].map(function(v){ return ('0'+v.toString(16)).slice(-2).toUpperCase(); }).join(''); return { color: 8, customColor: customColor, outlines: el['v-outline'].checked, outlineThickness: parseFloat(el['v-outline-thick'].value), outlineOpacity: parseFloat(el['v-outline-opacity'].value), centerDot: el['v-dot'].checked, centerDotThickness: parseFloat(el['v-dot-thick'].value), centerDotOpacity: parseFloat(el['v-dot-opacity'].value), overrideFiringError: false, inner: { show: el['v-in-show'].checked, opacity: parseFloat(el['v-in-opacity'].value), length: parseFloat(el['v-in-length'].value), vertical: parseFloat(el['v-in-length'].value), lengthNotLinked: false, thickness: parseFloat(el['v-in-thickness'].value), offset: parseFloat(el['v-in-offset'].value), movementError: el['v-in-moving'].checked, movementErrorMult: 1, firingError: el['v-in-firing'].checked, firingErrorMult: 1 }, outer: { show: el['v-out-show'].checked, opacity: parseFloat(el['v-out-opacity'].value), length: parseFloat(el['v-out-length'].value), vertical: parseFloat(el['v-out-length'].value), lengthNotLinked: false, thickness: parseFloat(el['v-out-thickness'].value), offset: parseFloat(el['v-out-offset'].value), movementError: el['v-out-moving'].checked, movementErrorMult: 1, firingError: el['v-out-firing'].checked, firingErrorMult: 1 } }; } function applyState(s) { el['v-color'].value = rgbToHex(parseInt(s.customColor.slice(0,2),16), parseInt(s.customColor.slice(2,4),16), parseInt(s.customColor.slice(4,6),16)); el['v-outline'].checked = s.outlines; el['v-outline-thick'].value = s.outlineThickness; el['v-outline-opacity'].value = s.outlineOpacity; el['v-dot'].checked = s.centerDot; el['v-dot-thick'].value = s.centerDotThickness; el['v-dot-opacity'].value = s.centerDotOpacity; el['v-in-show'].checked = s.inner.show; el['v-in-length'].value = s.inner.length; el['v-in-thickness'].value = s.inner.thickness; el['v-in-offset'].value = s.inner.offset; el['v-in-opacity'].value = s.inner.opacity; el['v-in-firing'].checked = s.inner.firingError; el['v-in-moving'].checked = s.inner.movementError; el['v-out-show'].checked = s.outer.show; el['v-out-length'].value = s.outer.length; el['v-out-thickness'].value = s.outer.thickness; el['v-out-offset'].value = s.outer.offset; el['v-out-opacity'].value = s.outer.opacity; el['v-out-firing'].checked = s.outer.firingError; el['v-out-moving'].checked = s.outer.movementError; ids.forEach(function(id){ var label = document.getElementById('wl-' + id + '-val'); if (label && el[id]) label.textContent = el[id].value; }); } function drawPreview(s) { var w = canvas.width, h = canvas.height; ctx.clearRect(0,0,w,h); ctx.fillStyle = bgColor; ctx.fillRect(0,0,w,h); var scale = 6; var cx = w/2, cy = h/2; var rgb = hexToRgb('#' + s.customColor.slice(0,6)); function drawLines(l, alpha) { if (!l.show || l.length 0) { ctx.fillStyle = 'rgba(0,0,0,' + s.outlineOpacity + ')'; var o = s.outlineThickness * scale * 0.4; ctx.fillRect(x-o, y-o, bw+o*2, bh+o*2); } ctx.fillStyle = color; ctx.fillRect(x,y,bw,bh); } bar(cx + offset, cy - thickness/2, length, thickness); // right bar(cx - offset - length, cy - thickness/2, length, thickness); // left bar(cx - thickness/2, cy + offset, thickness, length); // bottom bar(cx - thickness/2, cy - offset - length, thickness, length); // top } drawLines(s.outer, 1); drawLines(s.inner, 1); if (s.centerDot) { var dotSize = Math.max(2, s.centerDotThickness * scale * 0.5); var dotColor = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + s.centerDotOpacity + ')'; if (s.outlines) { ctx.fillStyle = 'rgba(0,0,0,' + s.outlineOpacity + ')'; ctx.fillRect(cx - dotSize/2 - 1, cy - dotSize/2 - 1, dotSize+2, dotSize+2); } ctx.fillStyle = dotColor; ctx.fillRect(cx - dotSize/2, cy - dotSize/2, dotSize, dotSize); } } function refresh() { var s = readState(); var code = encodePrimary(s); codeEl.textContent = code; errorEl.textContent = ''; drawPreview(s); } ids.forEach(function(id){ var input = el[id]; if (!input) return; var label = document.getElementById('wl-' + id + '-val'); input.addEventListener('input', function(){ if (label) label.textContent = input.value; refresh(); }); input.addEventListener('change', refresh); }); 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-val-copy-code').addEventListener('click', function(){ copyText(codeEl.textContent, this); }); document.getElementById('wl-val-import-btn').addEventListener('click', function(){ var input = document.getElementById('wl-val-import-input').value.trim(); if (!input) return; try { var decoded = decodePrimary(input); applyState(decoded); refresh(); } catch (e) { errorEl.textContent = 'Could not load that code: ' + e.message; } }); refresh(); })();