diff --git a/app/components/widget-builder.tsx b/app/components/widget-builder.tsx
index bd42b3f..3fa7a52 100644
--- a/app/components/widget-builder.tsx
+++ b/app/components/widget-builder.tsx
@@ -151,24 +151,26 @@ export default function WidgetBuilder({ region, accountId }: WidgetBuilderProps)
           </select>
         </div>
 
-        <div>
-          <label htmlFor="opacity" className="block text-sm font-medium text-gray-700">
-            Opacity
-          </label>
-          <div className="flex items-center gap-2">
-            <input
-              id="opacity"
-              type="range"
-              min={0}
-              max={100}
-              step={5}
-              value={opacity}
-              onChange={(e) => setOpacity(Number.parseInt(e.target.value))}
-              className="rounded border-gray-300 bg-gray-200 w-min"
-            />
-            <span className="text-sm font-medium text-gray-700">{opacity.toFixed(0)}%</span>
+        {theme !== "glass" && (
+          <div>
+            <label htmlFor="opacity" className="block text-sm font-medium text-gray-700">
+              Opacity
+            </label>
+            <div className="flex items-center gap-2">
+              <input
+                id="opacity"
+                type="range"
+                min={0}
+                max={100}
+                step={10}
+                value={opacity}
+                onChange={(e) => setOpacity(Number.parseInt(e.target.value))}
+                className="rounded border-gray-300 bg-gray-200 w-min"
+              />
+              <span className="text-sm font-medium text-gray-700">{opacity.toFixed(0)}%</span>
+            </div>
           </div>
-        </div>
+        )}
 
         <div className="space-y-4">
           <div className="flex items-center gap-2">
diff --git a/app/components/widgets/MatchHistory.tsx b/app/components/widgets/MatchHistory.tsx
index a2d5717..f3aac8d 100644
--- a/app/components/widgets/MatchHistory.tsx
+++ b/app/components/widgets/MatchHistory.tsx
@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import type { FC } from "react";
 import { useEffect, useState } from "react";
-import { UPDATE_INTERVAL_MS } from "~/constants/widget";
+import { THEME_STYLES, UPDATE_INTERVAL_MS } from "~/constants/widget";
 import { cn } from "~/lib/utils";
 import type { Hero, Match, MatchHistoryProps } from "~/types/match-history";
 
@@ -56,14 +56,10 @@ export const MatchHistory: FC<MatchHistoryProps> = ({ theme, opacity, numMatches
 
   if (loading) return null;
 
+  const bgColor = theme !== "glass" ? THEME_STYLES[theme].bgColor[Math.max(0, Math.round(opacity / 20 - 1))] : "";
+
   return (
-    <div
-      className={cn(
-        "flex gap-0.5 justify-start items-center h-9 rounded-t-xl pt-1",
-        theme === "light" ? "bg-white" : theme === "dark" ? "bg-[#1A1B1E]" : "text-white",
-      )}
-      style={{ opacity: opacity / 100 }}
-    >
+    <div className={cn("flex gap-0.5 justify-start items-center h-9 rounded-t-xl p-1", bgColor)}>
       {[...matches].map((match) => {
         const heroImage = heroes.get(match.hero_id);
         if (!heroImage) return null;
diff --git a/app/components/widgets/StatDisplay.tsx b/app/components/widgets/StatDisplay.tsx
index fdb30ad..5ed40e9 100644
--- a/app/components/widgets/StatDisplay.tsx
+++ b/app/components/widgets/StatDisplay.tsx
@@ -3,27 +3,22 @@ import { THEME_STYLES } from "~/constants/widget";
 import { cn } from "~/lib/utils";
 import type { StatDisplayProps } from "~/types/widget";
 
-export const StatDisplay: FC<StatDisplayProps> = ({ stat, theme = "dark", className }) => {
+export const StatDisplay: FC<StatDisplayProps> = ({ stat, opacity, theme = "dark", className }) => {
   const { variable, label, value, prefix, suffix } = stat;
 
+  const bgColor = theme !== "glass" ? THEME_STYLES[theme].bgColor[Math.max(0, Math.round(opacity / 20 - 1))] : "";
+
   return (
     <div
       className={
-        !variable.endsWith("_img")
-          ? cn(
-              "flex flex-col items-center p-2.5 rounded-lg transition-all duration-200",
-              theme === "light"
-                ? "bg-gradient-to-br from-gray-50 to-white border-gray-200/50"
-                : theme === "glass"
-                  ? "bg-white/5 hover:bg-white/10 backdrop-blur-sm border border-white/[0.05]"
-                  : "bg-gradient-to-br from-[#25262B] to-[#2C2E33] border-white/[0.03]",
-              theme === "light" && "border",
-              "relative",
-              "min-w-fit",
+        variable.endsWith("_img")
+          ? "flex flex-col items-center p-2.5 transition-all duration-200"
+          : cn(
+              "flex flex-col items-center p-2.5 rounded-xl transition-all duration-200 relative min-w-fit",
               THEME_STYLES[theme].stat,
               className,
+              bgColor ?? "",
             )
-          : cn("flex flex-col items-center p-2.5 rounded-lg transition-all duration-200")
       }
     >
       {variable.endsWith("_img") && value ? (
@@ -33,7 +28,7 @@ export const StatDisplay: FC<StatDisplayProps> = ({ stat, theme = "dark", classN
           <span
             className={cn(
               "text-[11px] font-medium tracking-wide uppercase text-center",
-              theme === "light" ? "text-gray-500" : "text-white/60",
+              theme === "light" ? "text-gray-800" : "text-white/60",
             )}
           >
             {label}
diff --git a/app/components/widgets/box.tsx b/app/components/widgets/box.tsx
index 8a13549..02ebb60 100644
--- a/app/components/widgets/box.tsx
+++ b/app/components/widgets/box.tsx
@@ -90,6 +90,9 @@ export const BoxWidget: FC<BoxWidgetProps> = ({
     numMatchesToShow = Number.parseInt(stats?.matches_today);
   }
 
+  const bgGradient = theme !== "glass" ? THEME_STYLES[theme].bgGradient[Math.round(opacity / 10)] : "";
+  const bgColor = theme !== "glass" ? THEME_STYLES[theme].bgColor[Math.max(0, Math.round(opacity / 20 - 1))] : "";
+
   return (
     <div className="inline-block">
       {showMatchHistory && (
@@ -110,32 +113,21 @@ export const BoxWidget: FC<BoxWidgetProps> = ({
       )}
       <div
         className={cn(
-          "inline-flex flex-col",
-          "rounded-b-xl transition-all duration-300",
-          theme === "light"
-            ? "bg-gradient-to-br from-white via-gray-50 to-white border-gray-200/50"
-            : theme === "glass"
-              ? "bg-black/10 backdrop-blur-md"
-              : "bg-gradient-to-br from-[#1A1B1E] via-[#1E1F23] to-[#25262B] border-white/[0.03]",
-          theme !== "glass" && "border",
+          "inline-flex flex-col shadow-lg rounded-b-xl transition-all duration-300",
+          theme !== "glass" && opacity > 0 && "border",
           showMatchHistory ? "border-t-0" : "rounded-t-xl",
-          "shadow-lg",
           THEME_STYLES[theme].container,
+          bgGradient ?? "",
         )}
-        style={{ opacity: opacity / 100 }}
       >
         {shouldShowHeader && (
           <div
             className={cn(
               !showMatchHistory && "rounded-t-xl",
               "px-4 py-3",
-              theme === "light"
-                ? "bg-gradient-to-r from-white to-gray-50 border-b border-gray-200/50"
-                : theme === "glass"
-                  ? "bg-white/5"
-                  : "bg-gradient-to-r from-[#1A1B1E] to-[#25262B] border-b border-white/[0.03]",
               "relative",
               THEME_STYLES[theme].header,
+              bgColor ?? "",
             )}
           >
             <div className="flex items-center justify-between">
@@ -167,7 +159,7 @@ export const BoxWidget: FC<BoxWidgetProps> = ({
             <>
               <div className="flex gap-2 w-fit items-center">
                 {getStatDisplays().map((stat) => (
-                  <StatDisplay key={stat.label} stat={stat} theme={theme} className="flex-none" />
+                  <StatDisplay key={stat.label} opacity={opacity} stat={stat} theme={theme} className="flex-none" />
                 ))}
               </div>
 
@@ -184,18 +176,14 @@ export const BoxWidget: FC<BoxWidgetProps> = ({
                     target="_blank"
                     rel="noopener noreferrer"
                     className={cn(
-                      "group flex items-center gap-1.5 px-3 py-1.5 rounded-full transition-all",
-                      theme === "light"
-                        ? "bg-gray-100/50 hover:bg-gray-100"
-                        : theme === "glass"
-                          ? "bg-white/5 hover:bg-white/10"
-                          : "bg-white/[0.02] hover:bg-white/[0.04]",
+                      "group flex items-center gap-1.5 px-3 py-1.5 rounded-full transition-all bg-gradient-to-r",
+                      opacity < 60 ? (bgColor ?? "") : "",
                     )}
                   >
                     <span
                       className={cn(
                         "text-[11px] font-medium transition-all",
-                        theme === "light" ? "text-gray-500" : "text-white/50",
+                        theme === "light" ? "text-gray-800" : "text-white/50",
                       )}
                     >
                       Widget by
@@ -204,7 +192,7 @@ export const BoxWidget: FC<BoxWidgetProps> = ({
                       className={cn(
                         "text-[11px] font-semibold transition-all",
                         theme === "light"
-                          ? "text-gray-600 group-hover:text-gray-900"
+                          ? "text-gray-900 group-hover:text-gray-900"
                           : "text-white/70 group-hover:text-white",
                       )}
                     >
diff --git a/app/constants/widget.ts b/app/constants/widget.ts
index ea3305d..5568997 100644
--- a/app/constants/widget.ts
+++ b/app/constants/widget.ts
@@ -11,24 +11,49 @@ export const DEFAULT_VARIABLES = [
 export const DEFAULT_LABELS = ["Rank", "Place", "Daily W-L", "K/D", "Hours Played"];
 
 export const THEME_STYLES = {
-  default: {
-    container: "bg-[#1A1B1E]",
-    header: "text-white/90",
-    stat: "bg-[#25262B] hover:bg-[#2C2E33]",
-  },
   dark: {
-    container: "bg-[#1A1B1E]",
-    header: "text-white/90",
-    stat: "bg-[#25262B] hover:bg-[#2C2E33]",
+    container: "bg-gradient-to-br border-white/[0.03]",
+    header: "text-white/90 bg-gradient-to-r border-b border-white/[0.03]",
+    stat: "",
+    bgColor: ["bg-[#25262B]/40", "bg-[#25262B]/50", "bg-[#25262B]/70", "bg-[#25262B]/80", "bg-[#25262B]/100"],
+    bgGradient: [
+      "from-[#1A1B1E]/0 via-[#1E1F23]/0 to-[#25262B]/0",
+      "from-[#1A1B1E]/10 via-[#1E1F23]/10 to-[#25262B]/10",
+      "from-[#1A1B1E]/20 via-[#1E1F23]/20 to-[#25262B]/20",
+      "from-[#1A1B1E]/30 via-[#1E1F23]/30 to-[#25262B]/30",
+      "from-[#1A1B1E]/40 via-[#1E1F23]/40 to-[#25262B]/40",
+      "from-[#1A1B1E]/50 via-[#1E1F23]/50 to-[#25262B]/50",
+      "from-[#1A1B1E]/60 via-[#1E1F23]/60 to-[#25262B]/60",
+      "from-[#1A1B1E]/70 via-[#1E1F23]/70 to-[#25262B]/70",
+      "from-[#1A1B1E]/80 via-[#1E1F23]/80 to-[#25262B]/80",
+      "from-[#1A1B1E]/90 via-[#1E1F23]/90 to-[#25262B]/90",
+      "from-[#1A1B1E]/100 via-[#1E1F23]/100 to-[#25262B]/100",
+    ],
   },
   light: {
-    container: "bg-white",
-    header: "text-gray-900",
-    stat: "bg-gray-50 hover:bg-gray-100",
+    container: "bg-gradient-to-br  border-gray-200/50",
+    header: "text-gray-900 bg-gradient-to-r border-b border-gray-200/50",
+    stat: "",
+    bgColor: ["bg-gray-50/40", "bg-gray-50/50", "bg-gray-50/70", "bg-gray-50/80", "bg-gray-50/100"],
+    bgGradient: [
+      "from-white/0 via-gray-50/0 to-white/0",
+      "from-white/10 via-gray-50/10 to-white/10",
+      "from-white/20 via-gray-50/20 to-white/20",
+      "from-white/30 via-gray-50/30 to-white/30",
+      "from-white/40 via-gray-50/40 to-white/40",
+      "from-white/50 via-gray-50/50 to-white/50",
+      "from-white/60 via-gray-50/60 to-white/60",
+      "from-white/70 via-gray-50/70 to-white/70",
+      "from-white/80 via-gray-50/80 to-white/80",
+      "from-white/90 via-gray-50/90 to-white/90",
+      "from-white/100 via-gray-50/100 to-white/100",
+    ],
   },
   glass: {
-    container: "bg-black/10",
-    header: "text-white",
-    stat: "bg-white/5 hover:bg-white/10",
+    container: "bg-black/10 backdrop-blur-md",
+    header: "text-white bg-white/5",
+    stat: "bg-white/5 hover:bg-white/10 backdrop-blur-sm border border-white/[0.05]",
+    bgColor: [],
+    bgGradient: [],
   },
 } as const;
diff --git a/app/types/widget.ts b/app/types/widget.ts
index 36cb939..2c92287 100644
--- a/app/types/widget.ts
+++ b/app/types/widget.ts
@@ -32,6 +32,7 @@ export type BoxWidgetProps = {
 
 export type StatDisplayProps = {
   stat: Stat;
+  opacity: number;
   className?: string;
   theme?: Theme;
 };