How can I apply a multi-color box shadow to my countdown component?

I’m working on a countdown component in React using Tailwind CSS and inline styles. I want to apply a multi-colored shadow effect around a container, but I can’t seem to get the colors to show correctly. The box shadow either shows only one color (orange) or doesn’t appear as expected.

'use client';

import React, {useState, useEffect} from 'react';

interface CountdownProps {
  header1: string;
  header2: string;
  headerClass?: string;
}

const CountdownComponent: React.FC<CountdownProps> = ({
  header1,
  header2,
  headerClass="text-[30px] font-bold bg-clip-text text-transparent bg-gradient-to-b from-white to-[#ffd22f]",
}) => {
const [timeLeft, setTimeLeft] = useState({
  days: 999,
  hours: 99,
  minutes: 99,
  seconds: 99,
});

useEffect(() => {
  const countDownDate = new Date('2024-09-31T23:59:59').getTime();

  const timer = setInterval(() => {
    const now = new Date().getTime();
    const distance = countDownDate - now;

    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor(
      (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
    );
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    setTimeLeft({days, hours, minutes, seconds});

    if (distance < 0) {
      clearInterval(timer);
      setTimeLeft({days: 0, hours: 0, minutes: 0, seconds: 0});
    }
  }, 1000);

  return () => clearInterval(timer);
}, []);

// Function to pad numbers to two digits
const formatTime = (time: number) => {
  return time < 10 ? `0${time}` : time.toString();
};

return (
  <>
    <div className="w-[370px] sm:w-full max-w-[720px] mx-auto text-center text-white mt-10">
      <h3 className={`${headerClass}`}>{header1}</h3>
      <h3 className={`-mt-[6px] ${headerClass}`}>{header2}</h3>
    </div>
    <div
      className="relative w-[370px] sm:w-full max-w-[720px] mt-6 rounded-2xl"
      style={{
        boxShadow: `
          0 0 20px 5px rgba(255, 173, 0, 0.3),   /* Yellow (#FFAD00) */
          0 0 20px 5px rgba(255, 56, 56, 0.3),   /* Red (#F53838) */
          0 0 20px 5px rgba(255, 0, 0, 0.3)      /* Dark Red (#FF0000) */
        `,
        background: 'linear-gradient(180deg, #28272F 0%, #040404 100%)',
      }}
    >
      {/* Background box with gradient and shadow */}
      <div className="relative bg-custom-gradient-shopping-1 rounded-2xl p-8 text-white text-center">
        <div className="flex justify-center items-center gap-1 text-[41px]">
          <div className="flex flex-col items-center">
            <span className="font-[500] tracking-wide bg-clip-text text-transparent bg-gradient-to-b from-white to-gray-600">
              {formatTime(timeLeft.days)}
            </span>
            <span className="text-[10px] font-bold tracking-wide bg-clip-text text-transparent bg-gradient-to-b from-white to-gray-600">
              DAYS
            </span>
          </div>
          <span className="text-4xl text-gray-400 pb-4 pl-1">:</span>
          <div className="flex flex-col items-center">
            <span className="font-[500] tracking-wide bg-clip-text text-transparent bg-gradient-to-b from-white to-gray-600">
              {formatTime(timeLeft.hours)}
            </span>
            <span className="text-[10px] font-bold tracking-wide bg-clip-text text-transparent bg-gradient-to-b from-white to-gray-600">
              HOURS
            </span>
          </div>
          <span className="text-4xl text-gray-400 pb-4 pl-1">:</span>
          <div className="flex flex-col items-center">
            <span className="font-[500] tracking-wide bg-clip-text text-transparent bg-gradient-to-b from-white to-gray-600">
              {formatTime(timeLeft.minutes)}
            </span>
            <span className="text-[10px] font-bold tracking-wide bg-clip-text text-transparent bg-gradient-to-b from-white to-gray-600">
              MINUTES
            </span>
          </div>
          <span className="text-4xl text-gray-400 pb-4 pl-1">:</span>
          <div className="flex flex-col items-center">
            <span className="font-[500] tracking-wide bg-clip-text text-transparent bg-gradient-to-b from-white to-gray-600">
              {formatTime(timeLeft.seconds)}
            </span>
            <span className="text-[10px] font-bold tracking-wide bg-clip-text text-transparent bg-gradient-to-b from-white to-gray-600">
              SECONDS
            </span>
          </div>
        </div>
      </div>
    </div>
    {/* Last month's info */}
    <div className="font-semibold text-xs text-gray-400 mt-8 text-center">
      The winner will be announced
      <br />
      via email on May 31st.
    </div>
  </>
);
};

export default CountdownComponent;

I want to apply a multi-colored shadow (yellow, red, and dark red) around the container where the countdown timer is displayed.

However, only the orange shadow appears, and the other colors seem to be overridden or not visible.

You need to sign in to view this answers