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

메시 그라디언트

Mesh Gradient

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

다른 이름: MeshGradientGradient mesh

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

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

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

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

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

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

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

속성(props) · MeshGradient

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

이름값기본값범위·선택지설명(원문)
colorAColor A#1a0533—First gradient color (two-color fallback when stops are cleared)
colorBColor B#ffdf8e—Second gradient color (two-color fallback when stops are cleared)
stopsColors코드에서 지정[{"color":"#1a0533","position":0},{"color":"#6d2fd1","pos…—Multi-stop gradient colors (overrides Color A / Color B when set)
colorSpaceColor Spaceoklablinear · oklch · oklab · hsl · hsv · lchColor space for color interpolation
countPoints52 – 8 (step 1)Number of color points scattered across the canvas
smoothnessSmoothness20 – 5 (step 0.01)How smoothly the color points blend into each other
variationVariation0.350 – 1 (step 0.01)Varies edge softness across the canvas — some color boundaries crisp, others diffuse
swirlSwirl0.3-1 – 1 (step 0.01)Vortex rotation that spirals the field around the frame centre — negative values spin the other way
driftDrift0.50 – 1 (step 0.01)How far the color points wander from their home positions
wrappingWrapping00 – 1 (step 0.01)Wraps the palette back through itself where colors meet — banded seams where the field pinches, smooth elsewhere
speedSpeed10 – 10 (step 0.1)Animation speed
seedSeed00 – 100 (step 1)Random seed for the point layout and palette assignment

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

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

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

다중 포인트 그라디언트Multi Point Gradient

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

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

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

흐르는 그라디언트Flowing Gradient

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

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

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

오로라Aurora

밤하늘에 여러 겹의 오로라 커튼과 세로빛이 흐르고 흔들립니다.

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

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

색상환 그라디언트Color Wheel

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

물감이 젖은 종이 위에서 번지듯, 여러 색 덩어리가 경계 없이 이어지고 천천히 움직입니다. 정적인 배경보다 유기적인 색 흐름이 필요한 화면에 잘 맞습니다.

`stops`는 그라디언트에 쓸 여러 색을 정하고(기본값은 5개 색), `count`는 화면에 흩어질 색 지점 수를 정합니다(기본 5, 범위 2–8). `smoothness`를 올리면 색 지점 사이가 더 부드럽게 섞입니다(기본 2, 범위 0–5). `drift`를 올리면 색 지점이 원래 자리에서 더 멀리 움직이고(기본 0.5, 범위 0–1), `speed`를 올리면 움직임이 빨라집니다(기본 1, 범위 0–10).

생성 레이어라 밑에 입력을 둘 필요는 없습니다. 애니메이션이 계속 시선을 끌 수 있으니 텍스트 뒤에서는 움직임과 색 대비를 낮추고, 짧은 제목이나 큰 면적의 배경에 쓰면 읽기 쉽습니다.

언제 쓰나

브랜드 히어로 배경을 생동감 있게 만들 때, 부드러운 색 덩어리가 필요한 카드나 커버에 쓸 때, 정적인 색 면을 천천히 움직이고 싶을 때 좋습니다. 잔글씨가 많은 화면이나 움직임에 민감한 맥락에서는 피하거나 움직임을 낮추세요.

페이지로 열기 ↗