properties
changelog

Backdrop Shadow Filter

Add backdrop shadow (drop-shadow) filter effects.

Usage:

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

Reference

shilp.config.js
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;