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

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?

htmlcsstailwind-csslinear-gradients


Solution 1:[1]

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's direction

  before:from-*
  Gradient's start color

  before:via-* (optional)
  Gradient's via color

  before:to-* (default: transparent)
  Gradient's end color

  To use custom gradient stops:
  Don't use before:from-*, before:to-*, and before:via-*.
  Change the Tailwind gradient stops variable.
  For example: [--tw-gradient-stops:red,blue,deeppink_80%]

  before:left-*
  Shadow's horizontal offset

  before:top-*
  Shadow's vertical offset

  before:blur-*
  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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions