diff --git a/src/content/posts/markdown-extended.md b/src/content/posts/markdown-extended.md
index 241e7e21..c28173b6 100644
--- a/src/content/posts/markdown-extended.md
+++ b/src/content/posts/markdown-extended.md
@@ -81,4 +81,15 @@ This is a note with a custom title.
 
 > [!TIP]
 > The GitHub syntax is also supported.
+```
+
+### Spoiler
+
+You can add spoilers to your text. The text also supports **Markdown** syntax.
+
+The content :spoiler[is hidden **ayyy**]!
+
+```markdown
+The content :spoiler[is hidden **ayyy**]!
+
 ```
\ No newline at end of file
diff --git a/src/styles/main.css b/src/styles/main.css
index d6af28eb..9aaa1046 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -139,3 +139,14 @@
 .collapsed {
     height: var(--collapsedHeight);
 }
+
+.custom-md spoiler {
+  @apply bg-[var(--codeblock-bg)] hover:bg-transparent px-1 py-0.5 overflow-hidden rounded-md transition-all duration-150;
+
+  &:not(:hover) {
+    color: var(--codeblock-bg);
+    * {
+        color: var(--codeblock-bg);
+    }
+  }
+}
\ No newline at end of file