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

원형 그라디언트

Radial Gradient

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

다른 이름: RadialGradientCircular gradient

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

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

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

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

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

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

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

속성(props) · RadialGradient

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

이름값기본값범위·선택지설명(원문)
colorAColor A#ff0000—The starting color at the center of the gradient
colorBColor B#0000ff—The ending color at the edge of the gradient
stopsColors코드에서 지정null—Multi-stop gradient colors (overrides Color A / Color B when set)
centerCenter
x0.5y0.5
{"x":0.5,"y":0.5}x, y: 0 – 1The center point of the radial gradient
radiusRadius10 – 2 (step 0.1)The radius of the gradient (normalized, 0.0-1.0)
repeatRepeat11 – 20 (step 0.5)Number of times the gradient repeats. Values above 1 create concentric rings.
aspectAspect10.1 – 4 (step 0.01)Stretches the gradient into an ellipse. Values below 1 compress vertically, above 1 compress horizontally.
skewAngleSkew Angle00 – 360 (step 1)Rotates the ellipse axis in degrees. Only visible when Aspect is not 1.
colorSpaceColor Spacelinearlinear · oklch · oklab · hsl · hsv · lchColor space for color interpolation

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

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

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

다이아몬드 그라디언트Diamond Gradient

중심에서 마름모 모양으로 색이 퍼지며, 모양을 사각형에 가깝게 바꿀 수도 있습니다.

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

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

글로우Glow

밝은 부분을 주변으로 부드럽게 퍼뜨려 빛나는 후광을 만듭니다.

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

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

원Circle

캔버스에 채워진 원을 그리며, 크기와 가장자리의 부드러움을 조절할 수 있습니다.

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

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

원뿔형 그라디언트Conic Gradient

중심점을 둘러 색이 한 바퀴 이어지며, 색상환처럼 보이는 각도형 그라디언트입니다.

물에 떨어진 잉크가 둥글게 번지는 것처럼, 중심에서 가장자리로 색이 퍼집니다. 빛이 맺힌 듯한 배경이나 중심이 분명한 색 면을 만들 수 있습니다.

`colorA`는 중심 색, `colorB`는 바깥 색입니다. `center`를 옮기면 색이 시작되는 지점이 움직이고, `radius`를 키우면 색 변화가 화면 더 바깥까지 이어집니다(기본 1, 범위 0–2). `repeat`를 1보다 크게 하면 여러 겹의 동심원 띠가 생깁니다(기본 1, 범위 1–20).

이 레이어도 단독으로 캔버스를 채우므로 입력 레이어가 필요하지 않습니다. 중심을 화면 가장자리로 옮기면 밝은 부분이 한쪽에 몰릴 수 있으니, 텍스트를 얹을 영역의 밝기와 대비를 확인하세요. 반복 띠가 많으면 배경보다 무늬가 먼저 보일 수 있습니다.

언제 쓰나

화면 한쪽에 빛이 맺힌 듯한 배경이 필요할 때, 중심을 둔 시각적 초점을 만들 때, 원형 테두리나 고리 무늬를 만들 때 좋습니다. 여러 겹의 띠가 본문 글자와 경쟁하는 화면에는 피하세요.

페이지로 열기 ↗