properties
changelog

Backdrop Shadow Filter

Add backdrop shadow (drop-shadow) filter effects.

Usage:

  • @filter backdrop-shadow-*;
  • @filter backdrop-shadow-color-*;

Reference

shilp.config.js
/** @type {import('shilpcss/types').ShilpConfig} */
const shilpConfig = {
  source: "react",

  properties: {
    filter: {
      backdrop: {
        shadow: {
          DEFAULT: {
            property: "backdrop-filter: drop-shadow(<v>)<i>;",
            values: {
              none: "0 0 #0000",
              xs: "var(--bd-sdw-xs)",
              sm: "var(--bd-sdw-sm)",
              DEFAULT: "var(--bd-sdw-sm)",
              md: "var(--bd-sdw-md)",
              lg: "var(--bd-sdw-lg)",
              xl: "var(--bd-sdw-xl)",
              "2xl": "var(--bd-sdw-2xl)",
            },
          },

          color: {
            property: "--bd-sdw-clr: <v><i>;",
            resolve: "color",
            themeKey: "colors",
            variant: true,
            values: {},
          },
        },
      },
    },
  },
};

export default shilpConfig;

Published at:

Last updated at: