如何在顺风 css 中添加带有线性渐变的自定义阴影？答案

【问题标题】：How to add custom drop-shadow with linear-gradient in tailwind css?如何在顺风 css 中添加带有线性渐变的自定义阴影？
【发布时间】：2022-11-10 12:13:35
【问题描述】：

我正在寻找一种在顺风 CSS 中使用线性渐变添加自定义阴影的方法。在查看文档时，我发现了这个

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

over here

但我想用linear gradient 代替简单的颜色。

我试过这个

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

我还尝试更改taiwind.config.js，如下所示

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: [],
}

但这两种方法都不起作用。

我错过了什么？

【问题讨论】：

标签： html css tailwind-css linear-gradients

【解决方案1】：

渐变是图像。因此，它们不能用作 CSS 中的颜色

检查此Tailwind Play 以获得解决方案

<!--
  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>

【讨论】：