diff --git a/src/page/timeline/timeline-element/timeline-element.scss b/src/page/timeline/timeline-element/timeline-element.scss
index 2f8209b..47129fa 100644
--- a/src/page/timeline/timeline-element/timeline-element.scss
+++ b/src/page/timeline/timeline-element/timeline-element.scss
@@ -76,8 +76,7 @@ section.timeline-element {
       width: 50%;
 
       .date {
-        transform: translateX(calc(var(--icon-size) / 2 + 12px))
-          translateY(-10%);
+        transform: translateX(calc(var(--icon-size) / 2 + 12px)) translateY(-10%);
       }
     }
   }
@@ -85,7 +84,12 @@ section.timeline-element {
   .card {
     @include card-base();
     border-radius: var(--border-radius);
-    background-color: var(--card-color);
+
+    background-color: var(--blurred-card-color);
+    backdrop-filter: blur(var(--blur-radius));
+    @supports not (backdrop-filter: blur(var(--blur-radius))) {
+      background-color: var(--card-color);
+    }
 
     & > *:not(:first-child) {
       margin-top: var(--line-height);
diff --git a/src/style/vars.scss b/src/style/vars.scss
index 8fb90ea..5ee4edf 100644
--- a/src/style/vars.scss
+++ b/src/style/vars.scss
@@ -15,6 +15,8 @@
   --background: #ffffff;
   --normal-text-color: #31343f;
   --card-color: #ffffff;
+  --blurred-card-color: transparent;
+  --blur-radius: 16px;
   --special-text-color: var(--accent-color);
 }
 
@@ -50,6 +52,8 @@
   --background: #242638;
   --normal-text-color: #ffffff;
   --card-color: #263551;
+  --blurred-card-color: #26355166;
+  --blur-radius: 24px;
   --special-text-color: #ffffff;
   --inset-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.175),
     inset 0 0 1px rgba(0, 0, 0, 0.4);