Kunal's Build
← Back to Home

Crosshair

Precision crosshair cursor with animated targeting lines. Great for portfolio sites and games.

gamingboldanimated
HTML
<!-- Paste before </body> -->
<div id="cursor-cross">
  <div class="cross-h"></div>
  <div class="cross-v"></div>
  <div class="cross-center"></div>
</div>

How to Use

  1. Copy the HTML

    Add the HTML structure before your closing </body> tag

  2. Add the CSS

    Include the CSS in your stylesheet or <style> tag

  3. Include the JavaScript

    Add the JavaScript code in a <script> tag or external file

  4. Test it out

    Move your mouse to see the custom cursor in action!

Customization

Change Color

Update the color values in CSS to match your brand

#34d399

Adjust Size

Modify width and height properties to scale the cursor

Animation Speed

Change transition duration values for faster/slower animations

Explore More Cursors

Dot + Ring

Classic two-layer cursor with a sharp dot and trailing ring. Clean and versatile.

Glow Orb

Soft glowing orb that pulses and leaves a luminous trail. Perfect for dark premium sites.

Magnetic Snap

Cursor snaps and distorts toward interactive elements like a magnet. Ultra-premium feel.