diff --git a/README.md b/README.md
index 9b5979f..7ff0c39 100644
--- a/README.md
+++ b/README.md
@@ -120,7 +120,7 @@ This should result in general support for emoji's and `nerd font` icons.
 
 - [ ] add unit tests
 - [x] add support for nerd-fonts
-- [ ] add optional shadow
+- [x] add ~~optional~~ shadow
 - [ ] add more themes
 
 
diff --git a/assets/demo.svg b/assets/demo.svg
index 60f08b9..c01edc2 100644
--- a/assets/demo.svg
+++ b/assets/demo.svg
@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 323 123.19999999999999" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 323 123.19999999999999" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {
@@ -26,6 +26,10 @@
         font-weight: bold;
         font-family: arial;
     }
+    .shadow {
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }
     .terminal-601689729-r1 { fill: #c6d0f5 }
 .terminal-601689729-r2 { fill: #c6d0f5;font-weight: bold;font-style: italic; }
 .terminal-601689729-r3 { fill: #94e2d5 }
diff --git a/assets/logo.svg b/assets/logo.svg
index 8b158c2..8e070c1 100644
--- a/assets/logo.svg
+++ b/assets/logo.svg
@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 580 220.79999999999998" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 580 220.79999999999998" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {
@@ -26,6 +26,10 @@
         font-weight: bold;
         font-family: arial;
     }
+    .shadow {
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }
     .terminal-470432081-r1 { fill: #06dc9d }
 .terminal-470432081-r2 { fill: #0de988 }
 .terminal-470432081-r3 { fill: #18f373 }
diff --git a/assets/themes/cat-frappe.svg b/assets/themes/cat-frappe.svg
index b99d82e..1fddde6 100644
--- a/assets/themes/cat-frappe.svg
+++ b/assets/themes/cat-frappe.svg
@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {
@@ -26,6 +26,10 @@
         font-weight: bold;
         font-family: arial;
     }
+    .shadow {
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }
     .terminal-337599305-r1 { fill: #c6ceef;font-style: italic; }
 .terminal-337599305-r2 { fill: #c6ceef }
 .terminal-337599305-r3 { fill: #f38ba8;font-weight: bold }
diff --git a/assets/themes/cat-latte.svg b/assets/themes/cat-latte.svg
index b400dba..d478363 100644
--- a/assets/themes/cat-latte.svg
+++ b/assets/themes/cat-latte.svg
@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {
@@ -26,6 +26,10 @@
         font-weight: bold;
         font-family: arial;
     }
+    .shadow {
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }
     .terminal-3090832101-r1 { fill: #4c4f69;font-style: italic; }
 .terminal-3090832101-r2 { fill: #4c4f69 }
 .terminal-3090832101-r3 { fill: #f38ba8;font-weight: bold }
diff --git a/assets/themes/cat-macchiato.svg b/assets/themes/cat-macchiato.svg
index 6b0980d..117c6b1 100644
--- a/assets/themes/cat-macchiato.svg
+++ b/assets/themes/cat-macchiato.svg
@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {
@@ -26,6 +26,10 @@
         font-weight: bold;
         font-family: arial;
     }
+    .shadow {
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }
     .terminal-699554932-r1 { fill: #c5cff5;font-style: italic; }
 .terminal-699554932-r2 { fill: #c5cff5 }
 .terminal-699554932-r3 { fill: #f38ba8;font-weight: bold }
diff --git a/assets/themes/cat-mocha.svg b/assets/themes/cat-mocha.svg
index b582266..dedb166 100644
--- a/assets/themes/cat-mocha.svg
+++ b/assets/themes/cat-mocha.svg
@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {
@@ -26,6 +26,10 @@
         font-weight: bold;
         font-family: arial;
     }
+    .shadow {
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }
     .terminal-3081394899-r1 { fill: #c6d0f5;font-style: italic; }
 .terminal-3081394899-r2 { fill: #c6d0f5 }
 .terminal-3081394899-r3 { fill: #f38ba8;font-weight: bold }
diff --git a/assets/themes/dimmed_monokai.svg b/assets/themes/dimmed_monokai.svg
index 19cfbc0..9d14ee1 100644
--- a/assets/themes/dimmed_monokai.svg
+++ b/assets/themes/dimmed_monokai.svg
@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {
@@ -26,6 +26,10 @@
         font-weight: bold;
         font-family: arial;
     }
+    .shadow {
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }
     .terminal-2354076963-r1 { fill: #b9bcba;font-style: italic; }
 .terminal-2354076963-r2 { fill: #b9bcba }
 .terminal-2354076963-r3 { fill: #be3f48;font-weight: bold }
diff --git a/assets/themes/dracula.svg b/assets/themes/dracula.svg
index 6c81ebf..abfa53e 100644
--- a/assets/themes/dracula.svg
+++ b/assets/themes/dracula.svg
@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {
@@ -26,6 +26,10 @@
         font-weight: bold;
         font-family: arial;
     }
+    .shadow {
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }
     .terminal-60971586-r1 { fill: #f8f8f2;font-style: italic; }
 .terminal-60971586-r2 { fill: #f8f8f2 }
 .terminal-60971586-r3 { fill: #ff5555;font-weight: bold }
diff --git a/assets/themes/gruvbox-dark.svg b/assets/themes/gruvbox-dark.svg
index ed183a5..2885ec2 100644
--- a/assets/themes/gruvbox-dark.svg
+++ b/assets/themes/gruvbox-dark.svg
@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {
@@ -26,6 +26,10 @@
         font-weight: bold;
         font-family: arial;
     }
+    .shadow {
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }
     .terminal-3504430146-r1 { fill: #d5c4a1;font-style: italic; }
 .terminal-3504430146-r2 { fill: #d5c4a1 }
 .terminal-3504430146-r3 { fill: #fb4934;font-weight: bold }
diff --git a/assets/themes/gruvbox-light.svg b/assets/themes/gruvbox-light.svg
index bf182e6..0246bc8 100644
--- a/assets/themes/gruvbox-light.svg
+++ b/assets/themes/gruvbox-light.svg
@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {
@@ -26,6 +26,10 @@
         font-weight: bold;
         font-family: arial;
     }
+    .shadow {
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }
     .terminal-786586808-r1 { fill: #504945;font-style: italic; }
 .terminal-786586808-r2 { fill: #504945 }
 .terminal-786586808-r3 { fill: #9d0006;font-weight: bold }
diff --git a/assets/themes/monokai.svg b/assets/themes/monokai.svg
index 790c60a..0713786 100644
--- a/assets/themes/monokai.svg
+++ b/assets/themes/monokai.svg
@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {
@@ -26,6 +26,10 @@
         font-weight: bold;
         font-family: arial;
     }
+    .shadow {
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }
     .terminal-76700244-r1 { fill: #d9d9d9;font-style: italic; }
 .terminal-76700244-r2 { fill: #d9d9d9 }
 .terminal-76700244-r3 { fill: #f4005f;font-weight: bold }
diff --git a/assets/themes/night-owlish.svg b/assets/themes/night-owlish.svg
index 8c0fed6..3a85970 100644
--- a/assets/themes/night-owlish.svg
+++ b/assets/themes/night-owlish.svg
@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {
@@ -26,6 +26,10 @@
         font-weight: bold;
         font-family: arial;
     }
+    .shadow {
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }
     .terminal-3489946691-r1 { fill: #403f53;font-style: italic; }
 .terminal-3489946691-r2 { fill: #403f53 }
 .terminal-3489946691-r3 { fill: #d3423e;font-weight: bold }
diff --git a/assets/themes/nord.svg b/assets/themes/nord.svg
index 6734cf8..f7b61d6 100644
--- a/assets/themes/nord.svg
+++ b/assets/themes/nord.svg
@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {
@@ -26,6 +26,10 @@
         font-weight: bold;
         font-family: arial;
     }
+    .shadow {
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }
     .terminal-4100741401-r1 { fill: #d8dee9;font-style: italic; }
 .terminal-4100741401-r2 { fill: #d8dee9 }
 .terminal-4100741401-r3 { fill: #bf616a;font-weight: bold }
diff --git a/assets/themes/rich-default.svg b/assets/themes/rich-default.svg
index ac49bf8..213c9ca 100644
--- a/assets/themes/rich-default.svg
+++ b/assets/themes/rich-default.svg
@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {
@@ -26,6 +26,10 @@
         font-weight: bold;
         font-family: arial;
     }
+    .shadow {
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }
     .terminal-3451345950-r1 { fill: #c5c8c6;font-style: italic; }
 .terminal-3451345950-r2 { fill: #c5c8c6 }
 .terminal-3451345950-r3 { fill: #cc555a;font-weight: bold }
diff --git a/assets/yartsu.svg b/assets/yartsu.svg
index 7e45a93..4e150d4 100644
--- a/assets/yartsu.svg
+++ b/assets/yartsu.svg
@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 909 513.5999999999999" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 909 513.5999999999999" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {
@@ -26,6 +26,10 @@
         font-weight: bold;
         font-family: arial;
     }
+    .shadow {
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }
     .terminal-3015887605-r1 { fill: #94e2d5;font-weight: bold;font-style: italic; }
 .terminal-3015887605-r2 { fill: #c6d0f5 }
 .terminal-3015887605-r3 { fill: #8288a5 }
diff --git a/docs/rich-diff.md b/docs/rich-diff.md
index 6eb2e35..a66a2eb 100644
--- a/docs/rich-diff.md
+++ b/docs/rich-diff.md
@@ -11,8 +11,9 @@
 ```diff
 --- 
 +++ 
-@@ -1,47 +1,39 @@
- <svg class="rich-terminal" viewBox="0 0 {width} {height}" xmlns="http://www.w3.org/2000/svg">
+@@ -1,47 +1,43 @@
+-<svg class="rich-terminal" viewBox="0 0 {width} {height}" xmlns="http://www.w3.org/2000/svg">
++<svg class="rich-terminal shadow" viewBox="0 0 {width} {height}" xmlns="http://www.w3.org/2000/svg">
      <!-- Generated with Rich https://www.textualize.io -->
      <style>
 -
@@ -48,6 +49,10 @@
          font-family: arial;
      }}
 -
++    .shadow {{
++        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
++        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
++    }}
      {styles}
      </style>
 -
diff --git a/yartsu/_export_format.py b/yartsu/_export_format.py
index 2a30ab2..469f621 100644
--- a/yartsu/_export_format.py
+++ b/yartsu/_export_format.py
@@ -1,5 +1,5 @@
 CONSOLE_SVG_FORMAT = """\
-<svg class="rich-terminal" viewBox="0 0 {width} {height}" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 {width} {height}" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {{
@@ -27,6 +27,10 @@ CONSOLE_SVG_FORMAT = """\
         font-weight: bold;
         font-family: arial;
     }}
+    .shadow {{
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }}
     {styles}
     </style>
     <defs>