블렌드 모드

Blend modes

블렌드 모드는 위 레이어의 색을 아래 레이어의 색과 섞는 규칙입니다.

다른 이름: Blend modeCompositing modes

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

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

React

// WebGPU 를 지원하는 브라우저에서만 그립니다.
import { Shader, Circle, LinearGradient } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <LinearGradient
        colorA="#172554"
        colorB="#581c87" />
      <Circle
        blendMode="screen"
        center={{
          x: 0.38,
          y: 0.5
        }}
        color="#fb7185"
        opacity={0.85}
        radius={0.34} />
      <Circle
        blendMode="multiply"
        center={{
          x: 0.62,
          y: 0.5
        }}
        color="#38bdf8"
        opacity={0.85}
        radius={0.34} />
      <Circle
        blendMode="overlay"
        center={{
          x: 0.5,
          y: 0.68
        }}
        color="#facc15"
        opacity={0.8}
        radius={0.28} />
    </Shader>
  )
}

Vue

<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<script setup lang="ts">
import { Shader, Circle, LinearGradient } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <LinearGradient
      color-a="#172554"
      color-b="#581c87"/>
    <Circle
      blend-mode="screen"
      :center="{
        x: 0.38,
        y: 0.5
      }"
      color="#fb7185"
      :opacity="0.85"
      :radius="0.34"/>
    <Circle
      blend-mode="multiply"
      :center="{
        x: 0.62,
        y: 0.5
      }"
      color="#38bdf8"
      :opacity="0.85"
      :radius="0.34"/>
    <Circle
      blend-mode="overlay"
      :center="{
        x: 0.5,
        y: 0.68
      }"
      color="#facc15"
      :opacity="0.8"
      :radius="0.28"/>
  </Shader>
</template>

Svelte

<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<script>
  import { Shader, Circle, LinearGradient } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <LinearGradient
    colorA="#172554"
    colorB="#581c87" />
  <Circle
    blendMode="screen"
    center={{
      x: 0.38,
      y: 0.5
    }}
    color="#fb7185"
    opacity={0.85}
    radius={0.34} />
  <Circle
    blendMode="multiply"
    center={{
      x: 0.62,
      y: 0.5
    }}
    color="#38bdf8"
    opacity={0.85}
    radius={0.34} />
  <Circle
    blendMode="overlay"
    center={{
      x: 0.5,
      y: 0.68
    }}
    color="#facc15"
    opacity={0.8}
    radius={0.28} />
</Shader>

Solid

// WebGPU 를 지원하는 브라우저에서만 그립니다.
import { Shader, Circle, LinearGradient } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <LinearGradient
        colorA="#172554"
        colorB="#581c87" />
      <Circle
        blendMode="screen"
        center={{
          x: 0.38,
          y: 0.5
        }}
        color="#fb7185"
        opacity={0.85}
        radius={0.34} />
      <Circle
        blendMode="multiply"
        center={{
          x: 0.62,
          y: 0.5
        }}
        color="#38bdf8"
        opacity={0.85}
        radius={0.34} />
      <Circle
        blendMode="overlay"
        center={{
          x: 0.5,
          y: 0.68
        }}
        color="#facc15"
        opacity={0.8}
        radius={0.28} />
    </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: {
        colorA: '#172554',
        colorB: '#581c87',
      },
    },
    {
      type: 'Circle',
      props: {
        blendMode: 'screen',
        center: {
          x: 0.38,
          y: 0.5
        },
        color: '#fb7185',
        opacity: 0.85,
        radius: 0.34,
      },
    },
    {
      type: 'Circle',
      props: {
        blendMode: 'multiply',
        center: {
          x: 0.62,
          y: 0.5
        },
        color: '#38bdf8',
        opacity: 0.85,
        radius: 0.34,
      },
    },
    {
      type: 'Circle',
      props: {
        blendMode: 'overlay',
        center: {
          x: 0.5,
          y: 0.68
        },
        color: '#facc15',
        opacity: 0.8,
        radius: 0.28,
      },
    }
  ]
}, { disableTelemetry: true })

속성(props) · `Circle`

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

이름	값	기본값	범위·선택지	설명(원문)
`origin`Origin	코드에서 지정	center	—	Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.
`color`Color	#fb7185	#ffffff	—	The color of the circle
`radius`Radius	0.34	1	0 – 2 (step 0.01)	The radius of the circle. A value of one (1) is sets the circle to fit the canvas.
`softness`Softness	0	0	0 – 1 (step 0.01)	Edge softness. Lower values like zero (0) are sharp, higher values like one (1) are softer.
`center`Center Position	x0.38y0.5	{"x":0.5,"y":0.5}	x, y: 0 – 1	The center point of the circle
`strokeThickness`Stroke Thickness	0	0	0 – 0.5 (step 0.01)	The thickness of the stroke outline. Zero (0) means no stroke.
`strokeColor`Stroke Color	#000000	#000000	—	The color of the stroke outline
`strokePosition`Stroke Position		center	outside · center · inside	Position of the stroke relative to the circle edge
`colorSpace`Color Blending		linear	linear · oklch · oklab · hsl · hsv · lch	Color space for blending fill and stroke colors in soft edges

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

색종이를 포개 놓고 빛을 비출 때처럼, 블렌드 모드는 겹친 두 색이 만났을 때의 결과를 정합니다. `multiply`는 어둡게 섞고 `screen`은 밝게 더하며 `overlay`는 바탕의 명암을 살리는 방식으로 대비를 만듭니다.

각 레이어의 `blendMode`를 `normal`, `multiply`, `screen`, `overlay`처럼 바꾸면 겹치는 부분의 밝기와 대비가 달라집니다. `opacity`를 낮추면 모드의 영향도 약해지고, 색 자체를 바꾸면 같은 모드에서도 결과가 달라집니다.

블렌드 모드는 겹치는 색이 있어야 비교할 수 있으므로 아래에 대비되는 배경이나 도형을 둡니다. 밝은 사진 위에서 `multiply`는 지나치게 어두워질 수 있고, 여러 모드를 한꺼번에 쓰면 색이 탁해져 조정 의도를 잃기 쉽습니다.

언제 쓰나

빛 번짐을 배경에 자연스럽게 섞을 때, 색 도형을 포개 포스터 같은 대비를 만들 때, 텍스처의 존재감만 살짝 더할 때 좋습니다. 본문 글자나 핵심 정보의 명암 대비를 떨어뜨리는 경우에는 피하세요.

속성(props) · Circle

함께 보기

레이어 순서Layer stack

마스킹Masking

원Circle

선형 그라디언트Linear Gradient

언제 쓰나

속성(props) · `Circle`