Shader Atlas
한국어
◆ Materials

Obsidian

흑요석 유리

Dark tinted glass with flowing iridescent color on angled faces and bevels.

Also known as: ObsidianDark iridescent glassBlack glass

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React
// Renders only in browsers with WebGPU.
import { Shader, Obsidian } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <Obsidian />
    </Shader>
  )
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<script setup lang="ts">
import { Shader, Obsidian } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <Obsidian/>
  </Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<script>
  import { Shader, Obsidian } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <Obsidian />
</Shader>
Solid
// Renders only in browsers with WebGPU.
import { Shader, Obsidian } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <Obsidian />
    </Shader>
  )
}
JavaScript
// Renders only in browsers with WebGPU.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'Obsidian',
    }
  ]
}, { disableTelemetry: true })

Props · Obsidian

Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).

NameValueDefaultRange / optionsDescription
originOriginSet in codecenter—Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.
centerCenter
x0.5y0.5
{"x":0.5,"y":0.5}x, y: 0 – 1Center position of the glass shape
scaleScale10.1 – 3 (step 0.01)Scale of the glass shape (1 = default size)
rotationRotation00 – 360 (step 1)Rotation of the glass shape in degrees
bodyColorBody Color#06071a—The dark body of the glass — what the faces looking straight at you show. Keep it deep for the iridescence to pop.
colorAColor A#ff2f7a—First iridescent color (two-color fallback when stops are cleared)
colorBColor B#5fe6ff—Second iridescent color (two-color fallback when stops are cleared)
stopsColorsSet in code[{"color":"#ff2f7a","position":0},{"color":"#2a2cff","pos…—Multi-stop gradient colors (overrides Color A / Color B when set)
colorSpaceColor Spaceoklablinear · oklch · oklab · hsl · hsv · lchColor space for color interpolation
iridescenceIridescence10 – 1.5 (step 0.01)Strength of the color on the oblique surfaces — 0 = plain dark glass, above 1 = saturated neon walls
rimWidthRim Width0.550 – 1 (step 0.01)How far in from edge-on the color reaches — small keeps it to the steepest walls, large lets it creep across gently turning faces
rimSoftnessRim Softness0.250.02 – 0.6 (step 0.01)Softness of the transition from dark face to colored wall
flowAngleFlow Angle300 – 360 (step 1)Direction the gradient flows across the surface, in degrees
flowScaleFlow Scale10.2 – 4 (step 0.01)How many times the palette cycles across the shape — higher = tighter color bands
speedSpeed0.50 – 4 (step 0.01)Speed the gradient flows along the walls. 0 pauses.
glossGloss0.350 – 2 (step 0.01)Strength of the studio softboxes reflected in the glass — the pale highlights riding the top edges
envRotationEnv Rotation00 – 360 (step 1)Rotates the reflected studio — spins where the bright reflections fall
bevelWidthBevel Width0.080.005 – 0.3 (step 0.001)Width of the edge bevel on flat shapes — the band that turns away from the viewer and catches the color
bevelShapeBevel Profile00 – 1 (step 0.01)Bevel profile — 0 = one smooth round fillet, 1 = machined: a steep outer fillet, a chamfer plateau and an inner knee
edgeSoftnessEdge Softness0.050 – 1 (step 0.01)Softness of the shape boundary edge
shapeShapeSet in code{"type":"sphere3D","radius":0.35}—Serialized shape configuration (JSON)
shapeSdfUrlshapeSdfUrlSet in code—URL to a pre-generated SDF .bin file
shapeTypeshapeTypeSet in code—Active SDF shape type

Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Glass유리 렌즈

A glass lens that refracts content beneath a custom shape and adds a soft luminous edge.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Thin Film박막 간섭

An iridescent thin-film color band that follows the edge of a shape.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Holographic홀로그래픽 포일

Animated holographic foil with a rainbow sheen and glitter flakes.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Crystal크리스털 렌즈

A faceted crystal lens that refracts and disperses content beneath it.

Like black glass tilted into the light, its front-facing areas stay dark while angled faces flash with iridescent color.

`bodyColor` sets the dark face color. Raise `iridescence` to intensify color on angled surfaces; widen `rimWidth` to let the color reach farther inward. `flowAngle` turns the color flow, and `speed` controls its motion.

Use it as a self-contained material and contrast its dark faces against a lighter background. On a dark backdrop the front contour can disappear, so avoid it for small text or controls.

When to use

Use it for dark premium badges, jewel-like logos, or iridescent glass accents. Avoid it when the shape must stand out on a black background or clarity takes priority.

Open as page ↗