diff --git a/index.html b/index.html
index 0df6569..4b44986 100644
--- a/index.html
+++ b/index.html
@@ -59,6 +59,12 @@
                 <h2>Vanilla JS Projects</h2>
                 <p>coming soon</p>
             </div>
+            <div class="playground">
+                <h2>Playground</h2>
+                <p>Intended for just little snippets of code that look useful</p>
+                <a href="./playground.html">The Playground</a>
+            </div>
+
         </div>
     </main>
     <footer>
diff --git a/playground.css b/playground.css
new file mode 100644
index 0000000..86f738c
--- /dev/null
+++ b/playground.css
@@ -0,0 +1,6 @@
+.gradient-text {
+    background-image: linear-gradient(90deg, red, blue);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
\ No newline at end of file
diff --git a/playground.html b/playground.html
new file mode 100644
index 0000000..b65136d
--- /dev/null
+++ b/playground.html
@@ -0,0 +1,22 @@
+<!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>Playground</title>
+    <link rel="stylesheet" href="./playground.css">
+</head>
+<body>
+    <h1>Tricks</h1>
+
+    <h2>Gradient text with CSS</h2>
+    This one comes from Kevin Powell, on a YouTube video short <a href="https://www.youtube.com/watch?v=IQT4aI_Iup4">"Gradient text with CSS | CSS Tip of the Day"</a>. It applies a colored gradient to text.
+
+    Note that the -webkit- is needed to make this trick work in Safari.
+
+    <h1 class="gradient-text">Thingy Text thats with a gradient</h1>
+
+    <h2>???</h2>
+</body>
+</html>
\ No newline at end of file
