smooth-shadows

A library to generate smooth shadows with multiple layers

Install

npm install smooth-shadows

or

yarn add smooth-shadows

Usage

import { smoothShadows } from 'smooth-shadows'

const shadows = smoothShadows(0, '4px', '16px', 0, [0, 0, 0, 0.08])

console.log(shadows)
/*
[
  [ 0, '0.216px', '1.361px', 0, [ 0, 0, 0, 0.027 ] ],
  [ 0, '0.622px', '3.197px', 0, [ 0, 0, 0, 0.039 ] ],
  [ 0, '1.447px', '6.325px', 0, [ 0, 0, 0, 0.049 ] ],
  [ 0, '4px', '16px', 0, [ 0, 0, 0, 0.08 ] ]
]
*/

API

smoothShadows(x, y, blur, spread, color, options)

Parameters

• x: offset x
  • Type: string | 0
• y: offset y
  • Type: string | 0
• blur: blur radius
  • Type: string | 0
• spread: spread radius
  • Type: string | 0
• color: rgba
  • Type: [number, number, number, number]
• options (optional)
  • layers (optional): number of layers
    • Type: number
    • Default: 4
  • easings (optional):
    • offset (optional): easing of x and y, specify easing functions or cubic-bezier
      • Type: string | [number, number, number, number]
      • Default: [0.65, 0.1, 0.9, 0.4]
    • blur (optional): easing of blur, specify easing functions or cubic-bezier
      • Type: string | [number, number, number, number]
      • Default: [0.65, 0.2, 0.9, 0.4]
    • alpha (optional): easing of alpha, specify easing functions or cubic-bezier
      • Type: string | [number, number, number, number]
      • Default: [0.2, 0.6, 0.9, 0.4]
  • output (optional): return values
    • Type: 'array' | 'object' | 'css'
    • Default: 'array'

Return values

Depends on the value of the output option.

array (default)

[
  [0, "0.216px", "1.361px", 0, [0, 0, 0, 0.027]],
  [0, "0.622px", "3.197px", 0, [0, 0, 0, 0.039]],
  [0, "1.447px", "6.325px", 0, [0, 0, 0, 0.049]],
  [0, "4px", "16px", 0, [0, 0, 0, 0.08]]
]

object

[
  {
    "x": 0,
    "y": "0.216px",
    "blur": "1.361px",
    "spread": 0,
    "color": { "red": 0, "green": 0, "blue": 0, "alpha": 0.027 }
  },
  {
    "x": 0,
    "y": "0.622px",
    "blur": "3.197px",
    "spread": 0,
    "color": { "red": 0, "green": 0, "blue": 0, "alpha": 0.039 }
  },
  {
    "x": 0,
    "y": "1.447px",
    "blur": "6.325px",
    "spread": 0,
    "color": { "red": 0, "green": 0, "blue": 0, "alpha": 0.049 }
  },
  {
    "x": 0,
    "y": "4px",
    "blur": "16px",
    "spread": 0,
    "color": { "red": 0, "green": 0, "blue": 0, "alpha": 0.08 }
  }
]

css

0 0.216px 1.361px rgba(0, 0, 0, 0.027), 0 0.622px 3.197px rgba(0, 0, 0, 0.039), 0 1.447px 6.325px rgba(0, 0, 0, 0.049), 0 4px 16px rgba(0, 0, 0, 0.08)

Examples

Increase layers

const shadows = smoothShadows(0, '4px', '16px', 0, [0, 0, 0, 0.08], { layers: 8 })

console.log(shadows.length) //=> 8

Decrease layers

const shadows = smoothShadows(0, '4px', '16px', 0, [0, 0, 0, 0.08], { layers: 2 })

console.log(shadows.length) //=> 2

Specify easing with easing functions

Can be specify the easing function of easings.net. (But, cannot specify ease*Elastic and ease*Bounce)

smoothShadows(0, '4px', '16px', 0, [0, 0, 0, 0.08], {
  easings: { offset: 'easeInExpo', blur: 'easeInQuart', alpha: 'easeInOutCirc' },
})

Specify easing with cubic-bezier

Can be specify cubic-bezier, which was created by cubic-bezier.com.

smoothShadows(0, '4px', '16px', 0, [0, 0, 0, 0.08], {
  easings: { offset: [0.65, 0.1, 0.9, 0.4], blur: [0.65, 0.2, 0.9, 0.4], alpha: [0.2, 0.6, 0.9, 0.4] },
})

Output array

smoothShadows(0, '4px', '16px', 0, [0, 0, 0, 0.08], { output: 'array' })

Return values

Output object

smoothShadows(0, '4px', '16px', 0, [0, 0, 0, 0.08], { output: 'object' })

Return values

Output CSS

smoothShadows(0, '16px', '24px', 0, [0, 0, 0, 0.08], { output: 'css' })

Return values

Author

@p-chan

License

MIT