diff --git a/app/api/streak/route.ts b/app/api/streak/route.ts
index 1ddcf9fd..112632e5 100644
--- a/app/api/streak/route.ts
+++ b/app/api/streak/route.ts
@@ -62,6 +62,8 @@ export async function GET(request: Request) {
       labels,
       labelColor,
       versus,
+      shading,
+      gradient,
     } = parseResult.data;
 
     const themeName = theme || 'dark';
@@ -133,6 +135,8 @@ export async function GET(request: Request) {
       labels,
       labelColor,
       versus,
+      shading,
+      gradient,
     };
 
     let calendar;
@@ -204,7 +208,13 @@ function buildErrorResponse(error: unknown, parseResult: ParseResult): NextRespo
     message.toLowerCase().includes('could not resolve');
 
   const errBg = `#${(parseResult.success && parseResult.data.bg) || '0d1117'}`;
-  const errAccent = `#${(parseResult.success && parseResult.data.accent) || '58a6ff'}`;
+  const errAccent = `#${
+    (parseResult.success &&
+      (Array.isArray(parseResult.data.accent)
+        ? parseResult.data.accent[parseResult.data.accent.length - 1]
+        : parseResult.data.accent)) ||
+    '58a6ff'
+  }`;
   const errText = `#${(parseResult.success && parseResult.data.text) || 'c9d1d9'}`;
   const errRadius = parseResult.success
     ? (() => {
diff --git a/components/dashboard/ComparisonStatsCard.test.tsx b/components/dashboard/ComparisonStatsCard.test.tsx
index b5acfc7c..9f5605a1 100644
--- a/components/dashboard/ComparisonStatsCard.test.tsx
+++ b/components/dashboard/ComparisonStatsCard.test.tsx
@@ -138,12 +138,6 @@ describe('ComparisonStatsCard', () => {
       />
     );
 
-    const progressSegments = container.querySelectorAll(
-      '.w-full.bg-gray-700\\/50 div, .relative div'
-    );
-
-    const allDivs = Array.from(container.querySelectorAll('div'));
-
     const emeraldElement =
       container.querySelector('[className*="emerald"]') ||
       container.querySelector('.text-emerald-400');
diff --git a/lib/export3d.test.ts b/lib/export3d.test.ts
index 04e147eb..cbe3b0b5 100644
--- a/lib/export3d.test.ts
+++ b/lib/export3d.test.ts
@@ -21,6 +21,7 @@ describe('generateMonolithSTL', () => {
         strokeWidth: 1,
         row: 0,
         col: 0,
+        intensityLevel: 2,
       },
       {
         x: 0,
@@ -37,6 +38,7 @@ describe('generateMonolithSTL', () => {
         strokeWidth: 1,
         row: 1,
         col: 1,
+        intensityLevel: 0,
       },
     ];
 
@@ -67,6 +69,7 @@ it('generates structurally valid ASCII STL facets', () => {
       strokeWidth: 1,
       row: 0,
       col: 0,
+      intensityLevel: 2,
     },
   ];
 
diff --git a/lib/svg/generator.test.ts b/lib/svg/generator.test.ts
index 87739760..2c4997e2 100644
--- a/lib/svg/generator.test.ts
+++ b/lib/svg/generator.test.ts
@@ -811,6 +811,158 @@ describe('generateMonthlySVG', () => {
   });
 });
 
+describe('shading and gradients', () => {
+  const mockStats: StreakStats = {
+    currentStreak: 5,
+    longestStreak: 10,
+    totalContributions: 100,
+    todayDate: '2024-06-12',
+  };
+
+  const mockCalendar = {
+    weeks: [
+      {
+        contributionDays: [
+          { contributionCount: 0, date: '2024-06-10' },
+          { contributionCount: 5, date: '2024-06-11' },
+          { contributionCount: 15, date: '2024-06-12' },
+        ],
+      },
+    ],
+  } as ContributionCalendar;
+
+  it('renders linearGradient definitions when gradient=true', () => {
+    const svg = generateSVG(
+      mockStats,
+      { user: 'avi', gradient: true } as unknown as BadgeParams,
+      mockCalendar
+    );
+    expect(svg).toContain('<linearGradient id="tower-grad-level-1"');
+    expect(svg).toContain('<linearGradient id="tower-grad-level-4"');
+    expect(svg).toContain('fill="url(#tower-grad-level-');
+  });
+
+  it('does not render linearGradient definitions when gradient=false', () => {
+    const svg = generateSVG(
+      mockStats,
+      { user: 'avi', gradient: false } as unknown as BadgeParams,
+      mockCalendar
+    );
+    expect(svg).not.toContain('<linearGradient id="tower-grad-level-1"');
+  });
+
+  it('supports mapping colors in array accent lists to towers', () => {
+    const calendarWithAllQuartiles = {
+      weeks: [
+        {
+          contributionDays: [
+            { contributionCount: 2, date: '2024-06-10' }, // Level 1 (2/15 <= 0.25)
+            { contributionCount: 6, date: '2024-06-11' }, // Level 2 (6/15 <= 0.5)
+            { contributionCount: 10, date: '2024-06-12' }, // Level 3 (10/15 <= 0.75)
+            { contributionCount: 15, date: '2024-06-13' }, // Level 4
+          ],
+        },
+      ],
+    } as ContributionCalendar;
+
+    const svg = generateSVG(
+      mockStats,
+      { user: 'avi', accent: ['111111', '222222', '333333', '444444'] } as unknown as BadgeParams,
+      calendarWithAllQuartiles
+    );
+    expect(svg).toContain('fill="#111111"');
+    expect(svg).toContain('fill="#222222"');
+    expect(svg).toContain('fill="#333333"');
+    expect(svg).toContain('fill="#444444"');
+  });
+
+  it('gracefully handles and clamps accent color arrays with fewer than 4 items without crashing', () => {
+    const calendarWithAllQuartiles = {
+      weeks: [
+        {
+          contributionDays: [
+            { contributionCount: 2, date: '2024-06-10' },
+            { contributionCount: 6, date: '2024-06-11' },
+            { contributionCount: 10, date: '2024-06-12' },
+            { contributionCount: 15, date: '2024-06-13' },
+          ],
+        },
+      ],
+    } as ContributionCalendar;
+
+    const svg = generateSVG(
+      mockStats,
+      { user: 'avi', accent: ['111111'] } as unknown as BadgeParams,
+      calendarWithAllQuartiles
+    );
+    expect(svg).toContain('fill="#111111"');
+  });
+});
+
+describe('shading', () => {
+  // A calendar with a mix of contribution counts to produce towers at different
+  // intensity levels — needed so that shading multipliers actually apply.
+  const shadingCalendar = {
+    weeks: [
+      {
+        contributionDays: [
+          { contributionCount: 2, date: '2024-06-10' }, // low intensity
+          { contributionCount: 10, date: '2024-06-11' }, // mid intensity
+          { contributionCount: 15, date: '2024-06-12' }, // high intensity
+        ],
+      },
+    ],
+  } as ContributionCalendar;
+
+  const shadingStats: StreakStats = {
+    currentStreak: 3,
+    longestStreak: 10,
+    totalContributions: 27,
+    todayDate: '2024-06-12',
+  };
+
+  it('applies reduced face-opacity (shading) when shading is not disabled', () => {
+    // With shading on, low-intensity towers use opacity multiplier 0.4, so their
+    // face-opacity should be lower than the unshaded base value.
+    const svgShading = generateSVG(
+      shadingStats,
+      { user: 'avi', shading: true } as unknown as BadgeParams,
+      shadingCalendar
+    );
+    // The shaded SVG should still contain the tower paths
+    expect(svgShading).toContain('class="cp-tower"');
+    // For level 1 (mult=0.4), base top face opacity 0.7 becomes 0.28
+    // Check for that specific derived value to ensure shading actually multiplied it.
+    expect(svgShading).toContain('fill-opacity="0.28"');
+  });
+
+  it('does not apply shading multipliers when shading=false', () => {
+    const svgShading = generateSVG(
+      shadingStats,
+      { user: 'avi', shading: true } as unknown as BadgeParams,
+      shadingCalendar
+    );
+    const svgNoShading = generateSVG(
+      shadingStats,
+      { user: 'avi', shading: false } as unknown as BadgeParams,
+      shadingCalendar
+    );
+    // The two renders must differ — shading changes face opacities
+    expect(svgShading).not.toBe(svgNoShading);
+  });
+
+  it('falls back to default accent #00ffaa when accent array is empty', () => {
+    const svg = generateSVG(
+      shadingStats,
+      // Simulate what validation returns for accent=,,, (empty array is
+      // now normalised to undefined, but if it somehow reached the renderer
+      // as [] the fallback should still fire without crashing).
+      { user: 'avi', accent: [] } as unknown as BadgeParams,
+      shadingCalendar
+    );
+    expect(svg).toContain('00ffaa');
+  });
+});
 describe('escapeXML', () => {
   it('escapes ampersands (&)', () => {
     expect(escapeXML('foo & bar')).toBe('foo &amp; bar');
diff --git a/lib/svg/generator.ts b/lib/svg/generator.ts
index b279e43c..8071dcb9 100644
--- a/lib/svg/generator.ts
+++ b/lib/svg/generator.ts
@@ -104,18 +104,56 @@ function renderHeader(
 ): string {
   const unit = params.mode === 'loc' ? 'lines of code' : 'total contributions';
   const entity = params.org ? 'Organization' : params.repo ? 'Repository' : 'User';
+
   return `
   <title>CommitPulse ${entity} Stats for ${safeUser}</title>
   <desc>
     ${safeUser} has ${stats.totalContributions} ${unit} and a longest streak of ${stats.longestStreak} days.
   </desc>
-  ${renderDefs(sf)}`;
+  ${renderDefs(sf, params)}`;
 }
 
-function renderDefs(sf: number): string {
+function renderDefs(sf: number, params: BadgeParams): string {
   const fs = (n: number): number => Math.round(n * sf * 10) / 10;
+
+  let gradients = '';
+  if (params.gradient) {
+    if (params.autoTheme) {
+      for (let i = 0; i < 4; i++) {
+        const level = i + 1;
+        gradients += `
+      <linearGradient id="tower-grad-level-${level}" x1="0" y1="1" x2="0" y2="0">
+        <stop offset="0%" stop-color="var(--cp-bg)" stop-opacity="0.1" />
+        <stop offset="100%" stop-color="var(--cp-accent)" stop-opacity="${0.4 + i * 0.2}" />
+      </linearGradient>`;
+      }
+    } else {
+      const accent = params.accent;
+      const colors = Array.isArray(accent)
+        ? [0, 1, 2, 3].map((i) => {
+            const idx = Math.min(i, accent.length - 1);
+            const c = accent[idx] || accent[accent.length - 1] || '00ffaa';
+            return c.startsWith('#') ? c : `#${c}`;
+          })
+        : [0, 1, 2, 3].map(() => (String(accent).startsWith('#') ? String(accent) : `#${accent}`));
+
+      const bgStr = params.bg || '0d1117';
+      const bgHex = bgStr.startsWith('#') ? bgStr : `#${bgStr}`;
+
+      colors.forEach((c, idx) => {
+        const level = idx + 1;
+        gradients += `
+      <linearGradient id="tower-grad-level-${level}" x1="0" y1="1" x2="0" y2="0">
+        <stop offset="0%" stop-color="${bgHex}" stop-opacity="0.1" />
+        <stop offset="100%" stop-color="${c}" stop-opacity="${0.4 + idx * 0.2}" />
+      </linearGradient>`;
+      });
+    }
+  }
+
   return `<defs>
     <filter id="glow" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="${fs(5)}" result="blur" /><feComposite in="SourceGraphic" in2="blur" operator="over" /></filter>
+    ${gradients}
   </defs>`;
 }
 
@@ -181,24 +219,109 @@ function renderStyle(
   </style>`;
 }
 
-function renderTowers(towerData: TowerData[], accent: string, text: string, sf: number): string {
+function renderTowers(
+  towerData: TowerData[],
+  params: BadgeParams,
+  accent: string | string[],
+  text: string,
+  sf: number,
+  isAutoTheme: boolean = false
+): string {
   let towers = '';
+  const opacityMultipliers = [0.4, 0.6, 0.8, 1.0];
+
   for (const t of towerData) {
-    const color = t.isGhost ? text : accent;
+    const isGhost = t.isGhost;
+    let strokeColor = '';
+    let leftRightFillAttr = '';
+    let topFillAttr = '';
+
+    if (isAutoTheme) {
+      strokeColor = isGhost ? 'var(--cp-text)' : 'var(--cp-accent)';
+      leftRightFillAttr = isGhost ? 'class="cp-text-fill"' : 'class="cp-accent-fill"';
+      topFillAttr = leftRightFillAttr;
+    } else {
+      const baseAccentColor = Array.isArray(accent)
+        ? accent[accent.length - 1] || '00ffaa'
+        : accent || '00ffaa';
+
+      const accentColorHex = baseAccentColor.startsWith('#')
+        ? baseAccentColor
+        : `#${baseAccentColor}`;
+      const textColorHex = text.startsWith('#') ? text : `#${text}`;
+
+      let resolvedSolidColor = isGhost ? textColorHex : accentColorHex;
+      if (!isGhost && t.intensityLevel > 0 && Array.isArray(accent)) {
+        const quartileIdx = Math.min(t.intensityLevel - 1, accent.length - 1);
+        const quartileColor = accent[quartileIdx] || accent[accent.length - 1] || '00ffaa';
+        resolvedSolidColor = quartileColor.startsWith('#') ? quartileColor : `#${quartileColor}`;
+      }
+
+      strokeColor = resolvedSolidColor;
+      leftRightFillAttr = `fill="${resolvedSolidColor}"`;
+      topFillAttr = leftRightFillAttr;
+    }
+
+    let leftFaceOpacity = t.faceOpacity.left;
+    let rightFaceOpacity = t.faceOpacity.right;
+    let topFaceOpacity = t.faceOpacity.top;
+
+    if (!isGhost && t.intensityLevel > 0 && params.shading === true) {
+      const mult = opacityMultipliers[t.intensityLevel - 1];
+      leftFaceOpacity = Math.round(leftFaceOpacity * mult * 100) / 100;
+      rightFaceOpacity = Math.round(rightFaceOpacity * mult * 100) / 100;
+      topFaceOpacity = Math.round(topFaceOpacity * mult * 100) / 100;
+    }
+
+    let leftFillAttr = leftRightFillAttr;
+    let rightFillAttr = leftRightFillAttr;
+    let finalTopFillAttr = topFillAttr;
+
+    if (!isGhost && t.intensityLevel > 0 && params.gradient === true) {
+      leftFillAttr = `fill="url(#tower-grad-level-${t.intensityLevel})"`;
+      rightFillAttr = `fill="url(#tower-grad-level-${t.intensityLevel})"`;
+
+      if (isAutoTheme) {
+        finalTopFillAttr = 'class="cp-accent-fill"';
+      } else {
+        const capIdx = Math.min(t.intensityLevel - 1, accent.length - 1);
+        const baseAccentColor = Array.isArray(accent)
+          ? accent[capIdx] || accent[accent.length - 1]
+          : accent;
+        const capColor = baseAccentColor.startsWith('#') ? baseAccentColor : `#${baseAccentColor}`;
+        finalTopFillAttr = `fill="${capColor}"`;
+      }
+    }
+
+    const strokeAttr = isGhost
+      ? `stroke="${strokeColor}" stroke-opacity="${t.strokeOpacity}" stroke-width="${t.strokeWidth}"`
+      : '';
     const delay = ((t.row + t.col) * 0.015).toFixed(3);
+
     towers += `
         <g transform="translate(${t.x}, ${t.y})">
           <g class="cp-tower" style="animation-delay: ${delay}s;">
             ${t.isTodayWithCommits ? '<animate attributeName="opacity" values="1;0.4;1" dur="1.5s" repeatCount="indefinite" />' : ''}
             <title>${escapeXML(t.tooltip)}</title>
-            <path d="M0 ${10 - t.h} L0 10 L-16 0 L-16 ${-t.h} Z" fill="${color}" fill-opacity="${t.faceOpacity.left}" stroke="${color}" stroke-opacity="${t.strokeOpacity}" stroke-width="${t.strokeWidth}" />
-            <path d="M0 ${10 - t.h} L0 10 L16 0 L16 ${-t.h} Z" fill="${color}" fill-opacity="${t.faceOpacity.right}" stroke="${color}" stroke-opacity="${t.strokeOpacity}" stroke-width="${t.strokeWidth}" />
-            <path d="M0 ${-t.h} L16 ${10 - t.h} L0 ${20 - t.h} L-16 ${10 - t.h} Z" fill="${color}" fill-opacity="${t.faceOpacity.top}" stroke="${color}" stroke-opacity="${t.strokeOpacity}" stroke-width="${t.strokeWidth}" />
+            <path d="M0 ${10 - t.h} L0 10 L-16 0 L-16 ${-t.h} Z" ${leftFillAttr} fill-opacity="${leftFaceOpacity}" ${strokeAttr} />
+            <path d="M0 ${10 - t.h} L0 10 L16 0 L16 ${-t.h} Z" ${rightFillAttr} fill-opacity="${rightFaceOpacity}" ${strokeAttr} />
+            <path d="M0 ${-t.h} L16 ${10 - t.h} L0 ${20 - t.h} L-16 ${10 - t.h} Z" ${finalTopFillAttr} fill-opacity="${topFaceOpacity}" ${strokeAttr} />
             ${t.contributionCount > 5 ? `<path d="M0 ${-t.h} L16 ${10 - t.h} L0 ${20 - t.h} L-16 ${10 - t.h} Z" fill="white" fill-opacity="0.2" />` : ''}
           </g>
         </g>`;
-    if (t.contributionCount >= 10)
-      towers += generateParticles(t.x, t.y, t.h, t.contributionCount, sf, false, accent);
+
+    if (t.contributionCount >= 10) {
+      const pIdx = Math.min(t.intensityLevel - 1, accent.length - 1);
+      const pColorResolved = Array.isArray(accent)
+        ? accent[pIdx] || accent[accent.length - 1] || '00ffaa'
+        : accent || '00ffaa';
+      const pColor = isAutoTheme
+        ? ''
+        : pColorResolved.startsWith('#')
+          ? pColorResolved
+          : `#${pColorResolved}`;
+      towers += generateParticles(t.x, t.y, t.h, t.contributionCount, sf, isAutoTheme, pColor);
+    }
   }
   return towers;
 }
@@ -323,7 +446,11 @@ export function generateSVG(
 
   const safeUser = escapeXML(params.user || 'GitHub User');
   const bg = `#${sanitizeHexColor(params.bg, '0d1117')}`;
-  const accent = `#${sanitizeHexColor(params.accent, '00ffaa')}`;
+
+  const accent = Array.isArray(params.accent)
+    ? params.accent.map((c) => sanitizeHexColor(c, '00ffaa'))
+    : sanitizeHexColor(params.accent, '00ffaa');
+
   const text = `#${sanitizeHexColor(params.text, 'ffffff')}`;
 
   // NEW LOGIC: Conditionally create the stroke attributes
@@ -356,16 +483,21 @@ export function generateSVG(
     computeTowers(calendar, params.scale, stats.todayDate, params.mode),
     sf
   );
-  const towers = renderTowers(towerData, accent, text, sf);
+  const towers = renderTowers(towerData, params, accent, text, sf, false);
+
+  const mainAccent = Array.isArray(accent)
+    ? accent[accent.length - 1] || '00ffaa'
+    : accent || '00ffaa';
+  const mainAccentHex = mainAccent.startsWith('#') ? mainAccent : `#${mainAccent}`;
 
   return `
 <svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}" fill="none" role="img">
   ${renderHeader(safeUser, stats, sf, params)}
-  ${renderStyle(selectedFont, statsFont, googleFontsImport, text, accent, sf)}
+  ${renderStyle(selectedFont, statsFont, googleFontsImport, text, mainAccentHex, sf)}
   <rect width="${W}" height="${H}" rx="${radius}" fill="${params.hideBackground ? 'transparent' : bg}" ${borderAttr} />
   <g transform="translate(0, ${Math.round(20 * sf)})">${towers}</g>
   ${renderIsometricLabels(calendar, params, text, sf)}
-  ${renderFooter(stats, params, labels, safeUser, accent, sf)}
+  ${renderFooter(stats, params, labels, safeUser, mainAccentHex, sf)}
 </svg>`;
 }
 
@@ -392,27 +524,7 @@ function generateAutoThemeSVG(
     computeTowers(calendar, params.scale, stats.todayDate, params.mode),
     sf
   );
-  let towers = '';
-
-  for (const t of towerData) {
-    const fillClass = t.isGhost ? 'cp-text-fill' : 'cp-accent-fill';
-    const strokeColor = t.isGhost ? 'var(--cp-text)' : 'var(--cp-accent)';
-    const delay = ((t.row + t.col) * 0.015).toFixed(3);
-
-    towers += `
-        <g transform="translate(${t.x}, ${t.y})">
-          <g class="cp-tower" style="animation-delay: ${delay}s;">
-            ${t.isTodayWithCommits ? '<animate attributeName="opacity" values="1;0.4;1" dur="1.5s" repeatCount="indefinite" />' : ''}
-            <title>${escapeXML(t.tooltip)}</title>
-            <path d="M0 ${10 - t.h} L0 10 L-16 0 L-16 ${-t.h} Z" class="${fillClass}" fill-opacity="${t.faceOpacity.left}" stroke="${strokeColor}" stroke-opacity="${t.strokeOpacity}" stroke-width="${t.strokeWidth}" />
-            <path d="M0 ${10 - t.h} L0 10 L16 0 L16 ${-t.h} Z" class="${fillClass}" fill-opacity="${t.faceOpacity.right}" stroke="${strokeColor}" stroke-opacity="${t.strokeOpacity}" stroke-width="${t.strokeWidth}" />
-            <path d="M0 ${-t.h} L16 ${10 - t.h} L0 ${20 - t.h} L-16 ${10 - t.h} Z" class="${fillClass}" fill-opacity="${t.faceOpacity.top}" stroke="${strokeColor}" stroke-opacity="${t.strokeOpacity}" stroke-width="${t.strokeWidth}" />
-            ${t.contributionCount > 5 ? `<path d="M0 ${-t.h} L16 ${10 - t.h} L0 ${20 - t.h} L-16 ${10 - t.h} Z" fill="white" fill-opacity="0.2" />` : ''}
-          </g>
-        </g>`;
-    if (t.contributionCount >= 10)
-      towers += generateParticles(t.x, t.y, t.h, t.contributionCount, sf, true);
-  }
+  const towers = renderTowers(towerData, params, '', '', sf, true);
 
   const s = createScaler(sf);
   const fs = (n: number): number => Math.round(n * sf * 10) / 10;
@@ -491,7 +603,12 @@ export function generateMonthlySVG(stats: MonthlyStats, params: BadgeParams): st
 
   const safeUser = escapeXML(params.user || 'GitHub User');
   const bg = `#${sanitizeHexColor(params.bg, '0d1117')}`;
-  const accent = `#${sanitizeHexColor(params.accent, '00ffaa')}`;
+
+  const rawAccent = Array.isArray(params.accent)
+    ? params.accent[params.accent.length - 1]
+    : params.accent;
+  const accent = `#${sanitizeHexColor(rawAccent, '00ffaa')}`;
+
   const text = `#${sanitizeHexColor(params.text, 'ffffff')}`;
 
   const sanitizedFont = sanitizeFont(params.font);
@@ -900,7 +1017,10 @@ export function generateVersusSVG(
   const safeUser1 = escapeXML(params.user || 'User 1');
   const safeUser2 = escapeXML(params.versus || 'User 2');
   const bg = `#${sanitizeHexColor(params.bg, '0d1117')}`;
-  const accent = `#${sanitizeHexColor(params.accent, '00ffaa')}`;
+  const rawAccent = Array.isArray(params.accent)
+    ? params.accent[params.accent.length - 1]
+    : params.accent;
+  const accent = `#${sanitizeHexColor(rawAccent, '00ffaa')}`;
   const text = `#${sanitizeHexColor(params.text, 'ffffff')}`;
 
   const sanitizedFont = sanitizeFont(params.font);
@@ -935,8 +1055,8 @@ export function generateVersusSVG(
     sf
   );
 
-  const towers1 = renderTowers(towerData1, accent, text, sf);
-  const towers2 = renderTowers(towerData2, accent, text, sf);
+  const towers1 = renderTowers(towerData1, params, accent, text, sf, false);
+  const towers2 = renderTowers(towerData2, params, accent, text, sf, false);
 
   const s = createScaler(sf);
   const unit = params.mode === 'loc' ? 'lines of code' : 'total contributions';
@@ -945,7 +1065,7 @@ export function generateVersusSVG(
 <svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}" fill="none" role="img">
   <title>CommitPulse Versus Stats: ${safeUser1} vs ${safeUser2}</title>
   <desc>${safeUser1} has ${stats1.totalContributions} ${unit}. ${safeUser2} has ${stats2.totalContributions} ${unit}.</desc>
-  ${renderDefs(sf)}
+  ${renderDefs(sf, params)}
   ${renderStyle(selectedFont, statsFont, googleFontsImport, text, accent, sf)}
   <rect width="${W}" height="${H}" rx="${radius}" fill="${params.hideBackground ? 'transparent' : bg}" />
   
@@ -1055,7 +1175,7 @@ function generateAutoThemeVersusSVG(
 <svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}" fill="none" role="img">
   <title>CommitPulse Versus Stats: ${safeUser1} vs ${safeUser2}</title>
   <desc>${safeUser1} has ${stats1.totalContributions} ${unit}. ${safeUser2} has ${stats2.totalContributions} ${unit}.</desc>
-  ${renderDefs(sf)}
+  ${renderDefs(sf, params)}
   
   <style>
   @import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=JetBrains+Mono&family=Roboto&family=Syncopate:wght@400;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
diff --git a/lib/svg/layout.ts b/lib/svg/layout.ts
index 0b9d6173..b40878cf 100644
--- a/lib/svg/layout.ts
+++ b/lib/svg/layout.ts
@@ -32,6 +32,7 @@ export interface TowerData {
   /** Grid position used to compute the staggered animation-delay (row + col) * offset */
   row: number;
   col: number;
+  intensityLevel: number; // Quartile level (0 for no commits, 1 to 4 based on contribution intensity)
 }
 
 function computeTowerHeight(
@@ -84,13 +85,17 @@ export function computeTowers(
   const weeks = calendar.weeks.slice(-14);
   const towers: TowerData[] = [];
 
-  // Calculate if the entire monolith is empty based on the selected mode metric
+  // Calculate if the entire monolith is empty and retrieve the maximum count (commits or LoC)
   let totalVisibleContributions = 0;
+  let maxCommits = 0;
   weeks.forEach((week) => {
     week.contributionDays.forEach((day) => {
       const count =
         mode === 'loc' ? (day.locAdditions || 0) + (day.locDeletions || 0) : day.contributionCount;
       totalVisibleContributions += count;
+      if (count > maxCommits) {
+        maxCommits = count;
+      }
     });
   });
 
@@ -119,6 +124,19 @@ export function computeTowers(
 
       const coords = projectIsometric(i, j);
 
+      let intensityLevel = 0;
+      if (hasCommits) {
+        if (maxCommits <= 4) {
+          intensityLevel = Math.min(4, day.contributionCount);
+        } else {
+          const ratio = day.contributionCount / maxCommits;
+          if (ratio <= 0.25) intensityLevel = 1;
+          else if (ratio <= 0.5) intensityLevel = 2;
+          else if (ratio <= 0.75) intensityLevel = 3;
+          else intensityLevel = 4;
+        }
+      }
+
       towers.push({
         x: coords.x,
         y: coords.y,
@@ -134,6 +152,7 @@ export function computeTowers(
         strokeWidth: isGhost ? 0.5 : 0,
         row: i,
         col: j,
+        intensityLevel,
       });
     });
   });
diff --git a/lib/validations.ts b/lib/validations.ts
index bcd6808b..b2dc80de 100644
--- a/lib/validations.ts
+++ b/lib/validations.ts
@@ -55,10 +55,31 @@ export const streakParamsSchema = z.object({
   accent: z
     .string()
     .optional()
-    .refine((val) => !val || /^[0-9a-fA-F]{3,4}$|^[0-9a-fA-F]{6,8}$/.test(val.replace('#', '')), {
-      message: 'accent must be a valid 3 or 6 character hex color without #',
-    })
-    .transform((val) => (val ? sanitizeHexColor(val, '00ffaa') : undefined)),
+    .refine(
+      (val) => {
+        if (!val) return true;
+        const parts = val.includes(',') ? val.split(',') : [val];
+        return parts.every((p) =>
+          /^[0-9a-fA-F]{3,4}$|^[0-9a-fA-F]{6,8}$/.test(p.trim().replace('#', ''))
+        );
+      },
+      {
+        message:
+          'accent must be a valid 3 or 6 character hex color without #, or a comma-separated list of them',
+      }
+    )
+    .transform((val) => {
+      if (!val) return undefined;
+      if (val.includes(',')) {
+        return val
+          .split(',')
+          .map((c) => c.trim())
+          .filter((c) => c.length > 0)
+          .slice(0, 4)
+          .map((c) => sanitizeHexColor(c, '00ffaa'));
+      }
+      return sanitizeHexColor(val, '00ffaa');
+    }),
 
   // Silently fall back to 'linear' for unknown values (matches old behavior)
   scale: z.enum(['linear', 'log']).catch('linear').default('linear'),
@@ -170,6 +191,22 @@ export const streakParamsSchema = z.object({
       },
       { message: 'Invalid versus GitHub username' }
     ),
+  shading: z
+    .string()
+    .optional()
+    .transform((val) => {
+      if (val === undefined) return undefined;
+      return val === 'true';
+    })
+    .default(false),
+  gradient: z
+    .string()
+    .optional()
+    .transform((val) => {
+      if (val === undefined) return undefined;
+      return val === 'true';
+    })
+    .default(false),
 });
 
 export const githubParamsSchema = z.object({
diff --git a/types/index.ts b/types/index.ts
index 2c627da1..3875331f 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -100,7 +100,6 @@ export interface MonthlyStats {
 export interface BadgeParams {
   /** GitHub username whose contribution data will be fetched and rendered. Required. */
   user: string;
-
   /** GitHub username of the opponent to compare against. */
   versus?: string;
 
@@ -114,7 +113,7 @@ export interface BadgeParams {
   text: HexColor;
 
   /** Tower and glow accent color as a hex string WITHOUT the leading '#'. Overrides theme default. */
-  accent: HexColor;
+  accent: HexColor | HexColor[];
 
   /** Duration of the radar scan line animation (e.g. '4s', '8s', '12s'). Defaults to '8s'. */
   speed: SpeedString;
@@ -175,4 +174,14 @@ export interface BadgeParams {
 
   /** Custom text color for the labels. Overrides text parameter. */
   labelColor?: HexColor;
+
+  /**
+   * When true, applies intensity-based opacity shading to tower faces so
+   * lower intensity levels appear slightly translucent/dimmer.
+   * Default is false (opt-in).
+   */
+  shading?: boolean;
+
+  /** Opt-in to show volumetric gradients on the monolith floor. */
+  gradient?: boolean;
 }