셰이더 아틀라스
EN
◐ 그라디언트·배경

다중 포인트 그라디언트

Multi Point Gradient

서로 다른 위치의 다섯 색 지점이 주변 색과 부드럽게 섞이는 그라디언트입니다.

다른 이름: MultiPointGradientMulti-point color gradient

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

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

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

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <MultiPointGradient />
    </Shader>
  )
}
Vue
<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<script setup lang="ts">
import { Shader, MultiPointGradient } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <MultiPointGradient/>
  </Shader>
</template>
Svelte
<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<script>
  import { Shader, MultiPointGradient } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <MultiPointGradient />
</Shader>
Solid
// WebGPU 를 지원하는 브라우저에서만 그립니다.
import { Shader, MultiPointGradient } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <MultiPointGradient />
    </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: 'MultiPointGradient',
    }
  ]
}, { disableTelemetry: true })

속성(props) · MultiPointGradient

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

이름값기본값범위·선택지설명(원문)
colorAColor A#4776E6—Color of control point A
positionAPosition A
x0.2y0.2
{"x":0.2,"y":0.2}x, y: 0 – 1Position of control point A
colorBColor B#C44DFF—Color of control point B
positionBPosition B
x0.8y0.2
{"x":0.8,"y":0.2}x, y: 0 – 1Position of control point B
colorCColor C#1ABC9C—Color of control point C
positionCPosition C
x0.2y0.8
{"x":0.2,"y":0.8}x, y: 0 – 1Position of control point C
colorDColor D#F8BBD9—Color of control point D
positionDPosition D
x0.8y0.8
{"x":0.8,"y":0.8}x, y: 0 – 1Position of control point D
colorEColor E#FF8C42—Color of control point E
positionEPosition E
x0.5y0.5
{"x":0.5,"y":0.5}x, y: 0 – 1Position of control point E
colorSpaceColor Spacelinearlinear · oklch · oklab · hsl · hsv · lchColor space for color interpolation
smoothnessSmoothness20 – 5 (step 0.01)Controls how smoothly colors blend.

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

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

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

메시 그라디언트Mesh Gradient

여러 색 영역이 부드럽게 섞이며 화면 위를 천천히 이동하는 메시 그라디언트입니다.

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

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

원형 그라디언트Radial Gradient

중심의 색에서 바깥쪽 색으로 원형으로 퍼져 나가는 그라디언트입니다.

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

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

단색 배경Solid Color

선택한 한 가지 색으로 캔버스를 채우는 단색 레이어입니다.

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

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

흐르는 그라디언트Flowing Gradient

액체 비단처럼 유기적인 색 띠가 흐르는 그라디언트입니다.

캔버스 위에 놓인 다섯 개의 물감 방울이 서로 번져 하나의 색 면이 되는 것처럼 보입니다. 색이 모이는 위치를 직접 나누고 싶을 때 쓸 수 있습니다.

`colorA`와 `positionA`로 첫 번째 지점의 색과 위치를 정하고, `colorB`와 `positionB`로 두 번째 지점을 조정합니다. `smoothness`를 올리면 각 지점 주변의 색이 더 넓고 부드럽게 이어집니다(기본 2, 범위 0–5). 나머지 세 지점도 같은 방식으로 색과 위치를 조정합니다.

이 생성 레이어는 자체적으로 캔버스를 채우므로 입력이 필요하지 않습니다. 색 지점이 가까우면 그 주변에서 색이 겹쳐 보일 수 있으니 서로 다른 색 면을 분리하고 싶다면 위치를 띄워 두세요. 복잡한 배경 위에 텍스트를 놓을 때는 각 지점의 색이 글자 뒤에서 어떻게 섞이는지 확인하세요.

언제 쓰나

화면의 여러 위치에 브랜드 색을 배치할 때, 한 화면 안에 부드러운 색 영역을 나눌 때, 색이 모이는 위치를 세밀하게 정하고 싶을 때 적합합니다. 단순한 두 색 전환만 필요하다면 피하세요.

페이지로 열기 ↗