properties
changelog

Drop Shadow Filter

Add shadow (drop-shadow) filter effects to elements.

Usage:

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

Reference

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

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

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

export default shilpConfig;

Published at:

Last updated at: