How to add custom drop-shadow with linear-gradient in tailwind css?

Issue

I am finding a way to add custom drop-shadow with linear-gradient in tailwind CSS. On looking the docs I found this

<div class="drop-shadow-[0_35px_35px_rgba(0,0,0,0.25)]">

over here

But I want to use a linear gradient in place of a simple color.

I tried this

<div class="drop-shadow-[0_0px_5px_linear-gradient( to right, #ffffff , #fffacc)]">

I also tried to change taiwind.config.js like below

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      dropShadow: {
        'xl' : '0px 0px 5px linear-gradient( to right, #ffffff , #fffacc)'
      } 
    },
  },
  plugins: [],
}

But both methods are not working.

What am I missing?

Solution

Using a gradient as a drop shadow's color in CSS is not possible.

Check this Tailwind Play for a solution to make this possible

<!--
  before:bg-gradient-to-*
  gradient drop shadow's direction

  before:left-*
  gradient drop shadow's horizontal offset

  before:top-*
  gradient drop shadow's vertical offset

  before:blur-*
  gradient drop shadow's blur
-->

<div class="
  w-56
  h-56
  bg-white
  relative
  before:absolute
  before:w-full
  before:h-full
  before:-z-10
  before:bg-gradient-to-r
  before:from-[#ffffff]
  before:to-[#fffacc]
  before:left-0
  before:top-0
  before:blur-[5px]
"></div>

Answered By - Nice18