diff --git a/Animations-CSS/switch bulb/ReadMe.md b/Animations-CSS/switch bulb/ReadMe.md
new file mode 100644
index 0000000000..09ba66f20d
--- /dev/null
+++ b/Animations-CSS/switch bulb/ReadMe.md
@@ -0,0 +1,3 @@
+# Switch bulb animation
+
+This is an animation of a switch bulb toggling using CSS.
\ No newline at end of file
diff --git a/Animations-CSS/switch bulb/index.html b/Animations-CSS/switch bulb/index.html
new file mode 100644
index 0000000000..0d650351fe
--- /dev/null
+++ b/Animations-CSS/switch bulb/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ Switch bulb animation
+
+
+
+
+
+
diff --git a/Animations-CSS/switch bulb/style.css b/Animations-CSS/switch bulb/style.css
new file mode 100644
index 0000000000..95519f59ce
--- /dev/null
+++ b/Animations-CSS/switch bulb/style.css
@@ -0,0 +1,35 @@
+* {
+ margin: 0px;
+ padding: 0px;
+ box-sizing: border-box;
+}
+
+body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: black;
+ min-height: 100vh;
+}
+
+.bulb {
+ position: relative;
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
+ background-color: rgb(56, 55, 55);
+}
+
+.bulb::before {
+ content: "";
+ position: absolute;
+ width: 2px;
+ height: 200px;
+ left: calc(50% - 1px);
+ bottom: 100px;
+ background-color: darkgray;
+}
+
+.bulb:active {
+ background: radial-gradient(aliceblue, gray);
+}
\ No newline at end of file