Shader Atlas
한국어
◎ Light & lens

Drop Shadow

드롭 섀도

Adds a soft shadow behind the input, following its alpha silhouette.

Also known as: DropShadowCast shadowAlpha shadow

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React
// Renders only in browsers with WebGPU.
import {
  Shader,
  DropShadow,
  LinearGradient,
  Star,
} from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <LinearGradient
        angle={90}
        colorA="#e2e8f0"
        colorB="#94a3b8" />
      <DropShadow>
        <Star
          color="#22d3ee"
          radius={0.32} />
      </DropShadow>
    </Shader>
  )
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<script setup lang="ts">
import {
  Shader,
  DropShadow,
  LinearGradient,
  Star
} from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <LinearGradient
      :angle="90"
      color-a="#e2e8f0"
      color-b="#94a3b8"/>
    <DropShadow>
      <Star
        color="#22d3ee"
        :radius="0.32"/>
    </DropShadow>
  </Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<script>
  import {
    Shader,
    DropShadow,
    LinearGradient,
    Star,
  } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <LinearGradient
    angle={90}
    colorA="#e2e8f0"
    colorB="#94a3b8" />
  <DropShadow>
    <Star
      color="#22d3ee"
      radius={0.32} />
  </DropShadow>
</Shader>
Solid
// Renders only in browsers with WebGPU.
import {
  Shader,
  DropShadow,
  LinearGradient,
  Star,
} from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <LinearGradient
        angle={90}
        colorA="#e2e8f0"
        colorB="#94a3b8" />
      <DropShadow>
        <Star
          color="#22d3ee"
          radius={0.32} />
      </DropShadow>
    </Shader>
  )
}
JavaScript
// Renders only in browsers with WebGPU.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'LinearGradient',
      props: {
        angle: 90,
        colorA: '#e2e8f0',
        colorB: '#94a3b8',
      },
    },
    {
      type: 'DropShadow',
      children: [
        {
          type: 'Star',
          props: {
            color: '#22d3ee',
            radius: 0.32,
          },
        },
      ],
    }
  ]
}, { disableTelemetry: true })

Props · DropShadow

Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).

NameValueDefaultRange / optionsDescription
colorColor#000000—Shadow color
distanceDistance0.10 – 1 (step 0.005)How far the shadow is offset from the content
angleAngle1350 – 360 (step 1)Direction the shadow is cast (compass degrees: 0=up, 90=right, 135=lower-right, 180=down)
blurBlur50 – 20 (step 0.5)Shadow softness (blur radius in pixels)
intensityIntensity0.50 – 1 (step 0.01)Shadow intensity — how strong/visible the shadow is
cutoutCutoutfalse—Hide the original layer and show only the shadow

Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Reflective Plane반사 바닥

Creates a reflective floor below the input and shows a flipped reflection of its content.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Glow글로우

Softens bright areas into a surrounding glow with adjustable intensity.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Vignette비네트

Darkens or tints the frame edges to draw attention toward the center.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Sparkle스파클

Adds twinkling star glints over the bright parts of the input.

Like a paper cutout lifted slightly above a table, the shadow follows the transparent outline of the input.

`distance` defaults to 0.1 (range 0–1) and sets how far the shadow sits from the original. `angle` defaults to 135° (0–360°); 0° points up, 90° right, and 135° down and right. `blur` defaults to 5px (0–20px) and softens the edge; `intensity` defaults to 0.5 (0–1) sets its strength. `cutout` defaults to false; setting it to true hides the original and leaves only the shadow.

Apply it to a shape, text, or sticker layer with a transparent background so the shadow can follow its silhouette. It can add depth alongside a glow or reflective plane. A fully opaque full-frame image can cast a frame-sized shadow instead of a useful object outline.

When to use

Use it to lift a transparent image, text, or shape from its background, or add shallow depth to a card or sticker. Avoid it when the input is an opaque full-frame image and you need an object-shaped shadow.

Open as page ↗