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

다이아몬드 그라디언트

Diamond Gradient

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

다른 이름: DiamondGradientDiamond-shaped gradient

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

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

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

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

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

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

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

속성(props) · DiamondGradient

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

이름값기본값범위·선택지설명(원문)
colorAColor A (Center)#4ffb4a—Color at the center of the diamond
colorBColor B (Edge)#4f1238—Color at the outer edges of the diamond
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 diamond
sizeSize0.70.01 – 2 (step 0.01)Extent of the gradient — controls how far Color A reaches before transitioning to Color B
rotationRotation00 – 360 (step 1)Rotation in degrees — tilts the diamond into a rhombus
repeatRepeat11 – 16 (step 0.5)Number of times the gradient repeats outward. Values above 1 create concentric diamond or square bands.
roundnessRoundness00 – 1 (step 0.01)Morphs from a sharp diamond (0) to a square (1)
colorSpaceColor Spacelinearlinear · oklch · oklab · hsl · hsv · lchColor space for color interpolation

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

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

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

원형 그라디언트Radial Gradient

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

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

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

다이아몬드 와이프Diamond Wipe

커지는 다이아몬드 셀이 격자를 이루며 이미지를 지웁니다.

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

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

원뿔형 그라디언트Conic Gradient

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

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

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

메시 그라디언트Mesh Gradient

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

중심에서 네 방향으로 색이 번지는 마름모형 빛처럼 보입니다. 원형 그라디언트보다 모서리와 직선이 강조된 배경을 만들 수 있습니다.

`colorA`는 중심 색, `colorB`는 바깥쪽 색입니다. `size`를 키우면 중심 색이 더 넓게 남습니다(기본 0.7, 범위 0.01–2). `roundness`를 0에서 1 쪽으로 올리면 뾰족한 마름모가 사각형에 가까워집니다(기본 0, 범위 0–1). `repeat`를 1보다 크게 하면 바깥쪽으로 마름모 또는 사각형 띠가 반복됩니다(기본 1, 범위 1–16).

자체적으로 캔버스를 채우는 레이어라 입력 이미지는 필요하지 않습니다. 선명한 모서리는 위에 놓인 얇은 선이나 글자와 시각적으로 겹쳐 보일 수 있으니, 장식 배경으로 쓸 때는 색 대비와 주변 여백을 살펴보세요. 반복 띠가 많아지면 본문보다 무늬가 먼저 보일 수 있습니다.

언제 쓰나

기하학적인 배경이 필요할 때, 중심에서 모서리로 퍼지는 색 면을 만들 때, 사각형에 가까운 광택을 만들 때 좋습니다. 부드럽고 눈에 띄지 않는 본문 배경이 필요하면 피하세요.

페이지로 열기 ↗