diff --git a/src/components/shortcodes/Spoiler.astro b/src/components/shortcodes/Spoiler.astro
new file mode 100644
index 0000000..7a7dcff
--- /dev/null
+++ b/src/components/shortcodes/Spoiler.astro
@@ -0,0 +1,47 @@
+---
+const { tip = '' } = Astro.props
+---
+{/* TODO: make it work in paragraph wrapped elements */}
+<span class="spoiler" title={tip}>
+    <slot/>
+</span>
+<style>
+    .spoiler {
+        background-color: #252525;
+        color: #252525;
+        transition: color 0.5s;
+        width: fit-content;
+    }
+
+    .spoiler:hover {
+        color: #ffffff;
+    }
+    /* fix blockquotes */
+    .spoiler blockquote {
+        color: #252525;
+        transition: color 0.5s;
+    }
+
+    .spoiler blockquote:hover {
+        color: #ffffff;
+    }
+    /* fix code */
+    .spoiler code pre {
+        color: #252525;
+        transition: color 0.5s;
+    }
+
+    .spoiler code pre:hover {
+        color: #ffffff;
+    }
+
+    /* fix list bullet*/
+    .spoiler li::marker {
+        color: #252525;
+        transition: color 0.5s;
+    }
+
+    .spoiler:hover li::marker {
+        color: #ffffff;
+    }
+</style>
\ No newline at end of file
diff --git a/src/content/pages/test.mdx b/src/content/pages/test.mdx
index 196fd35..fd9f7a8 100644
--- a/src/content/pages/test.mdx
+++ b/src/content/pages/test.mdx
@@ -4,9 +4,14 @@ description: 'This is a test page'
 ---
 import BlogRoll  from "../../components/shortcodes/BlogRoll.astro"
 import FediStatuses from "../../components/shortcodes/FediStatuses.astro"
+import Spoiler from "../../components/shortcodes/Spoiler.astro"
 
 testestestest
 
 <BlogRoll/>
 
+<Spoiler tip="Spoiler Title">
+    ~~This is the content of the spoiler.~~
+</Spoiler>
+
 <FediStatuses instanceDomain='portal.gb0.dev' userId='me' />
\ No newline at end of file