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

원뿔형 그라디언트

Conic Gradient

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

다른 이름: ConicGradientAngular gradient

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

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

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

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

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

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

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

속성(props) · ConicGradient

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

이름값기본값범위·선택지설명(원문)
colorAColor A#FF0080—Starting color of the sweep
colorBColor B#00BFFF—Ending color of the sweep (wraps back to Color A)
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 – 1Center point of the sweep
rotationRotation00 – 360 (step 1)Rotation offset in degrees — shifts where Color A begins
repeatRepeat11 – 24 (step 1)Number of times the gradient repeats around the circle. Values above 1 create a starburst pattern.
colorSpaceColor Spacelinearlinear · oklch · oklab · hsl · hsv · lchColor space for color interpolation

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

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

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

색상환 그라디언트Color Wheel

무지개 스펙트럼이나 선택한 세 색이 한 방향으로 이어지는 그라디언트입니다.

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

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

선형 그라디언트Linear Gradient

두 색 또는 여러 색을 한 방향으로 부드럽게 이어 캔버스를 채웁니다.

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

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

스트라이프Stripes

두 색의 띠가 나란히 반복되며 움직이는 줄무늬입니다.

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

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

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

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

원판을 돌려 색을 칠한 것처럼, 중심을 기준으로 각도가 바뀌며 색이 한 바퀴 이어집니다. 색상환이나 원형 진행 표시처럼 각도 자체가 중요한 요소에 어울립니다.

`colorA`에서 시작해 `colorB`로 이어지고, `stops`를 지정하면 여러 색으로 순환하는 구간을 만들 수 있습니다. `rotation`을 바꾸면 시작 색이 놓이는 각도가 이동합니다(기본 0°, 범위 0–360°). `repeat`를 1보다 크게 하면 원 둘레에 색 주기가 반복되어 별빛처럼 뻗는 무늬가 생깁니다(기본 1, 범위 1–24).

캔버스를 직접 채우는 생성 레이어라 아래 입력은 필요하지 않습니다. 색이 중심에서 이어지는 경계는 방사형으로 뻗으므로, 위에 올린 텍스트가 그 경계와 겹치지 않는지 살펴보세요. 반복을 높이면 장식성이 강해져 간단한 상태 표시에는 과할 수 있습니다.

언제 쓰나

색상환을 보여줄 때, 원형 진행 상태나 각도별 구간을 나타낼 때, 방사형 장식을 만들 때 적합합니다. 읽기 쉬운 넓은 단색 면이 필요한 배경에는 피하세요.

페이지로 열기 ↗