Add rainbow gradient fill card

diff --git a/index.html b/index.html
index a735c56b238e4600929dd4de39ceff7ea509baf5..2a23c02da4bad51937a7a1992b03c74e049b9d10 100644 (file)
--- a/index.html
+++ b/index.html
@@ -197,6 +197,47 @@
       border-radius: 8px;
     }
 
+    .card.rainbow-gradient {
+      border-radius: 12px;
+      border: 1px solid hsl(0deg 0% 70%);
+      background: hsl(216deg 40% 95% / 0.5);
+      transition: border-color 700ms, background-color 2000ms;
+      position: relative;
+    }
+
+    .card.rainbow-gradient:hover, .card.rainbow-gradient:focus-within {
+      background: hsl(216deg 40% 95% / 0.9);
+      transition: background-color 250ms;
+    }
+
+    .card.rainbow-gradient::before {
+      content: "";
+      position: absolute;
+      z-index: -1;
+      top: -1px;
+      left: -1px;
+      width: calc(100% + 2px);
+      height: calc(100% + 2px);
+      border-radius: 18px;
+      --shade: 50% 70%;
+      background: conic-gradient(hsl(360deg 80% 50%),
+          hsl(315deg 80% 50%),
+          hsl(270deg 80% 50%),
+          hsl(225deg 80% 50%),
+          hsl(180deg 80% 50%),
+          hsl(135deg 80% 50%),
+          hsl(90deg 80% 50%),
+          hsl(45deg 80% 50%),
+          hsl(0deg 80% 50%));
+      opacity: 0;
+      transition: opacity 600ms;
+    }
+
+    .card.rainbow-gradient:hover::before, .card.rainbow-gradient:focus-within::before {
+      opacity: 1;
+      transition: opacity 400ms;
+    }
+
     .card.hover-detail {
       block-size: 148px;
       background: hsl(0deg 0% 98%);
@@ -328,6 +369,13 @@
         </div>
       </div>
 
+      <div class="card rainbow-gradient">
+        <div class="card-content rainbow-gradient">
+          <h2>Rainbow gradient fill</h2>
+          <p>This card's background will fill with a subtle rainbow gradient when the card is hovered or focused.</p>
+        </div>
+      </div>
+
       <div class="card hover-detail">
         <div class="card-content hover-detail">
           <h2>Hover detail card</h2>