Shader Atlas
한국어
◆ Materials

Emboss

엠보싱·디보싱

Relief shading that makes child content look embossed or debossed.

Also known as: EmbossEmboss / debossRelief

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
import { Shader, Emboss, ImageTexture } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/poster.jpg" />
      <Emboss />
    </Shader>
  )
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<script setup lang="ts">
import { Shader, Emboss, ImageTexture } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <ImageTexture
      object-fit="cover"
      url="/samples/poster.jpg"/>
    <Emboss/>
  </Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<script>
  import { Shader, Emboss, ImageTexture } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <ImageTexture
    objectFit="cover"
    url="/samples/poster.jpg" />
  <Emboss />
</Shader>
Solid
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
import { Shader, Emboss, ImageTexture } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/poster.jpg" />
      <Emboss />
    </Shader>
  )
}
JavaScript
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
// 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: 'ImageTexture',
      props: {
        objectFit: 'cover',
        url: '/samples/poster.jpg',
      },
    },
    {
      type: 'Emboss',
    }
  ]
}, { disableTelemetry: true })

Props · Emboss

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 embossed shape
scaleScale10.1 – 3 (step 0.01)Scale of the embossed shape (1 = default size)
rotationRotation00 – 360 (step 1)Rotation of the embossed shape in degrees
depthDepth-0.5-1 – 1 (step 0.01)Relief depth — negative = inset (debossed), positive = raised (embossed)
lightAngleLight Angle2600 – 360 (step 1)Directional light angle in degrees — controls highlight and shadow direction
lightIntensityLight Intensity0.60 – 2 (step 0.01)Strength of the directional edge highlights and shadows
shadowIntensityShadow Intensity0.30 – 1 (step 0.01)Darkness of the relief shadow
shapeShapeSet in code{"type":"sphere3D","radius":0.35}—Serialized shape configuration (JSON)
shapeSdfUrlshapeSdfUrlSet in code—URL to a pre-generated SDF .bin file — when non-empty, activates SVG mode and triggers a shader recompile
shapeTypeshapeTypeSet in code—Active SDF shape type — triggers recompile when shape is switched. When empty, derived from shape JSON at mount time.

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

Wool울 섬유 질감

Adds an interwoven wool-fiber texture and bends the surface of the content below.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Stone석재 질감

Adds marbled stone patterning, relief shading, and surface distortion to the content below.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Drop Shadow드롭 섀도

Adds a soft shadow behind the input, following its alpha silhouette.

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.

It resembles lettering pressed into or raised from paper: highlights and shadows along the edge create the sense of relief.

Positive `depth` raises the surface; negative `depth` presses it inward. `lightAngle` sets the direction of highlights and shadows, and `lightIntensity` controls their contrast. Raise `shadowIntensity` for darker inset areas.

Place an image or shape underneath for the light and shadow to act on. A plain surface with enough contrast makes the relief visible; low-contrast small lettering can disappear.

When to use

Use it for embossed logos, pressed paper labels, or dimensional button surfaces. Avoid it on small low-contrast text or controls that rely on shading alone to convey state.

Open as page ↗