Emboss

Embossed / debossed relief shading on top of child content, driven by a custom shape

Props

  • origin

    Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.

    Type
    string
    Default
    center

  • center

    Center position of the embossed shape. Accepts CSS units, see Sizing and units.

    Type
    {x: number | string, y: number | string}
    Default
    {"x":0.5,"y":0.5}

  • scale

    Scale of the embossed shape (1 = default size)

    Type
    number
    Default
    1

  • rotation

    Rotation of the embossed shape in degrees

    Type
    number
    Default
    0

  • depth

    Relief depth — negative = inset (debossed), positive = raised (embossed)

    Type
    number
    Default
    -0.5

  • lightAngle

    Directional light angle in degrees — controls highlight and shadow direction

    Type
    number
    Default
    260

  • lightIntensity

    Strength of the directional edge highlights and shadows

    Type
    number
    Default
    0.6

  • shadowIntensity

    Darkness of the relief shadow

    Type
    number
    Default
    0.3

  • shape

    Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the Shape Effects guide for all available shapes and their options.

    Type
    ShapeConfig
    Default
    sphere3D

  • shapeSdfUrl

    URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the Shape Effects guide for how to generate an SDF from an SVG.

    Type
    string
    Default
    ""

Usage

<Shader>
  <Emboss>
    <Circle />
  </Emboss>
</Shader>