PostCSS Smooth Shadow

PostCSS plugin to generate more realistic smooth shadows. See demo.

.card {
  box-shadow: --soft-shadow(0 0.5rem 1rem oklch(0 0 0 / 10%));
}

.card {
  box-shadow:
    calc(0.111 * 0.5rem) calc(0.111 * 1rem) rgb(from oklch(0 0 0 / 10%) r g b / calc(alpha * 0.333)),
    0 calc(0.444 * 0.5rem) calc(0.444 * 1rem) rgb(from oklch(0 0 0 / 10%) r g b / calc(alpha * 0.667)),
    0 calc(1 * 0.5rem) calc(1 * 1rem) rgb(from oklch(0 0 0 / 10%) r g b / calc(alpha * 1));
}

It supports non-px units like rem, 3 shadow types, inset shadows, and any color format, but we recommend oklch().

---

  Built by Evil Martians, go-to agency for developer tools.

---

Usage

Step 1: Install plugin:

npm install --save-dev postcss postcss-smooth-shadow

Step 2: Check your project for existed PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

If you do not use PostCSS, add it according to official docs and set this plugin in settings.

Step 3: Add the plugin to plugins list:

module.exports = {
  plugins: [
+   require('postcss-smooth-shadow'),
    require('autoprefixer')
  ]
}

CSS API

The plugins supports 3 shadows types. You can try them on smoothshadows.com.

.soft {
  box-shadow: --soft-shadow(0 8px 8px oklch(0 0 0 / 10%));
}
.sharp {
  box-shadow: --sharp-shadow(0 8px 8px oklch(0 0 0 / 10%));
}
.linear {
  box-shadow: --linear-shadow(0 8px 8px oklch(0 0 0 / 10%));
}

It also supports inset shadows:

.inset {
  box-shadow: --soft-shadow(inset 10px 0 8px oklch(0 0 0 / 10%));
}

JS API

There is low-level JS API:

import { renderShadows } from 'postcss-smooth-shadow'

renderShadows('soft', false, '0', '0.5rem', '1rem', 'oklch(0 0 0 / 10%)')
// => ["calc(0.111 * 0.5rem) calc(0.111 * 1rem) …", …]