diff --git a/cursor animation.html b/cursor animation.html
new file mode 100644
index 0000000..180d469
--- /dev/null
+++ b/cursor animation.html	
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cursor Animation</title>
+</head>
+
+<body>
+    <div style="width:100%; height:100vh; background: rgb(107,72,172);
+    background: linear-gradient(90deg, rgba(107,72,172,1) 0%, rgba(9,121,71,1) 0%, rgba(0,255,214,1) 100%);">
+        <div class="cursor" id="Cursor"></div>
+    </div>
+    
+</body>
+<style>
+    * {
+        margin: 0;
+        padding: 0;
+    }
+
+    body {
+        background: url(back.jpg);
+        background-size: cover;
+        cursor:grab;
+    }
+
+    .cursor {
+        width: 40px;
+        height: 40px;
+        border-radius: 100%;
+        position: absolute;
+        transition: 0.05s all ease;
+        background-color: darkslateblue;
+    }
+</style>
+<script>
+    var cursor = document.getElementById("Cursor");
+
+document.onmousemove = function(e){
+    cursor.style.left = (e.pageX-23)+"px";
+    cursor.style.top = (e.pageY-23)+"px";
+    cursor.style.background = "darkslateblue";
+    cursor.style.display = "block";
+}
+document.onclick = function(e){
+    cursor.style.background = "white";
+}
+</script>
+
+</html>
