드롭 섀도

Drop Shadow

입력 레이어의 투명도 윤곽을 따라 부드러운 그림자를 뒤에 만듭니다.

다른 이름: DropShadowCast shadowAlpha shadow

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

React

// 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

<!-- 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

<!-- 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

// 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

// WebGPU 를 지원하는 브라우저에서만 그립니다.
// <canvas id="canvas" style="width:100%;height:320px"></canvas> 가 페이지에 있어야 한다
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`

값을 바꾸면 위 데모와 코드 탭에 바로 반영됩니다. 설명은 라이브러리 레지스트리의 영어 원문(MIT)입니다.

이름	값	기본값	범위·선택지	설명(원문)
`color`Color	#000000	#000000	—	Shadow color
`distance`Distance	0.1	0.1	0 – 1 (step 0.005)	How far the shadow is offset from the content
`angle`Angle	135	135	0 – 360 (step 1)	Direction the shadow is cast (compass degrees: 0=up, 90=right, 135=lower-right, 180=down)
`blur`Blur	5	5	0 – 20 (step 0.5)	Shadow softness (blur radius in pixels)
`intensity`Intensity	0.5	0.5	0 – 1 (step 0.01)	Shadow intensity — how strong/visible the shadow is
`cutout`Cutout		false	—	Hide the original layer and show only the shadow

모든 컴포넌트 공통: blendMode · opacity · visible · maskSource/maskType · boundingBox · id

종이 오려낸 조각을 바닥에서 살짝 띄웠을 때 뒤로 드리우는 그림자처럼, 입력의 투명한 윤곽을 따라 그림자가 생깁니다.

`distance`는 기본 0.1, 범위 0–1로 그림자가 원본에서 떨어지는 정도를 정합니다. `angle`은 기본 135°, 범위 0–360°이며 0°는 위, 90°는 오른쪽, 135°는 오른쪽 아래 방향입니다. `blur`는 기본 5px, 범위 0–20px로 가장자리를 부드럽게 만들고, `intensity`는 기본 0.5, 범위 0–1로 농도를 조절합니다. `cutout`은 기본 false이며 true로 바꾸면 원본을 숨기고 그림자만 남깁니다.

투명 배경을 가진 도형·글자·스티커 레이어에 적용해야 윤곽을 따라 그림자가 보입니다. 빛 방향을 맞춘 글로우나 반사 바닥과 함께 쓰면 깊이를 더할 수 있습니다. 불투명한 전체 화면 이미지에는 윤곽 대신 화면 전체의 그림자가 생길 수 있어 적합하지 않습니다.

언제 쓰나

투명 PNG·텍스트·도형을 배경에서 띄워 보이게 하거나, 카드·스티커에 얕은 깊이를 줄 때 씁니다. 그림자 윤곽이 필요한데 입력이 불투명한 전체 화면 이미지라면 피하세요.

속성(props) · DropShadow

함께 보기

반사 바닥Reflective Plane

글로우Glow

비네트Vignette

스파클Sparkle

언제 쓰나

속성(props) · `DropShadow`