Add Hero Section Gradient Variable with Dark Mode Support

[amiralim1377]

We need to define a reusable CSS variable for the hero section background gradient that supports both light and dark modes. The goal is to make it easy to apply the same gradient across the site using a single CSS class.

Define --heroSection variable in :root for light mode.

Define --heroSection variable in .dark for dark mode.

Create a CSS class .bg-heroSection that uses background: var(--heroSection);.

Ensure it works with Tailwind CSS, so it can be applied directly to HTML elements.

Use linear-gradient with oklch() values for smooth color transitions.

Make sure the gradient respects dark mode automatically.

@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));
:root {

--heroSection: linear-gradient(
90deg,
oklch(0.9784 0.0011 197.14) 0%,
oklch(0.9617 0.0051 228.82) 6%,
oklch(0.9151 0.0195 240.75) 26%,
oklch(0.8392 0.0417 243.79) 43%,
oklch(0.8117 0.0504 242.86) 61%,
oklch(0.8708 0.0324 239.41) 89%,
oklch(0.9784 0.0011 197.14) 100%
);
}

.dark {

--heroSection: linear-gradient(
90deg,
oklch(0.1311 0.0265 231.09) 0%,
oklch(0.1935 0.0394 245.16) 15%,
oklch(0.2729 0.0607 247.19) 30%,
oklch(0.2878 0.0631 246.11) 50%,
oklch(0.2563 0.0552 246.35) 60%,
oklch(0.189 0.0374 244.54) 78%,
oklch(0.1311 0.0265 231.09) 100%
);
}

@theme inline {

--color-heroSection: var(--heroSection);
}

[wongjn]

linear-gradient() is not a <color> CSS type and so would not work as a --color-* token. Instead, consider using the --background-image-* namespace for background-image:

@theme inline {
  --background-image-heroSection: var(--hero-section);
}

<div class="bg-heroSection">

https://play.tailwindcss.com/lilOyMfTan