DropShadow

Adds a soft shadow behind the child content based on its alpha silhouette

Props

colorstring

Default:#000000

Shadow color

color

stringDefault: #000000

Shadow color

distancenumber

Default:0.1

How far the shadow is offset from the content

distance

numberDefault: 0.1

How far the shadow is offset from the content

anglenumber

Default:135

Direction the shadow is cast (compass degrees: 0=up, 90=right, 135=lower-right, 180=down)

angle

numberDefault: 135

Direction the shadow is cast (compass degrees: 0=up, 90=right, 135=lower-right, 180=down)

blurnumber

Default:5

Shadow softness (blur radius in pixels)

blur

numberDefault: 5

Shadow softness (blur radius in pixels)

intensitynumber

Default:0.5

Shadow intensity — how strong/visible the shadow is

intensity

numberDefault: 0.5

Shadow intensity — how strong/visible the shadow is

Usage

<Shader>
  <DropShadow
    color="#000000"
    :intensity="0.5"
  >
    <Circle />
  </DropShadow>
</Shader>

<Shader>
  <DropShadow
    color="#000000"
    intensity={0.5}
  >
    <Circle />
  </DropShadow>
</Shader>

<Shader>
  <DropShadow
    color="#000000"
    intensity={0.5}
  >
    <Circle />
  </DropShadow>
</Shader>

<Shader>
  <DropShadow
    color="#000000"
    intensity={0.5}
  >
    <Circle />
  </DropShadow>
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'DropShadow', props: { color: '#000000', intensity: 0.5 }, children: [
      { type: 'Circle', props: {} }
    ]}
  ]
})

DotGrid

Duotone

Documentation

DropShadow

Props

Usage