Style

Choose how a surface responds to light without changing its base styles.

Compare the edge response

Choose a style and move your pointer around the card. The selection also updates this site’s cards, code blocks and navigation surfaces.

Style

Raised

Highlights the edge facing the light. Default.

Your component keeps its own colors and layout.

Compare edge styles

const light = useLight();
const surface = useSurface(light, { edgeStyle: "raised" });

<Card ref={surface}>
  Your component
</Card>

The example becomes interactive when JavaScript is enabled.

Compare edge styles

const light = useLight();
const surface = useSurface(light, { edgeStyle: "raised" });

<Card ref={surface}>
  Your component
</Card>

Style values

Style values
Value	Behavior
`raised`	Highlights the edge facing the light. Default.
`recessed`	Draws the highlight one decorative edge thickness inward. Preserves the selected light direction.
`matte`	Softens the edge response.

For additional settings, see the API reference.

Raised

Use edgeStyle: 'raised' for an outward-facing edge highlight.

Recessed

Use edgeStyle: 'recessed' for a highlight inset by one decorative edge thickness, such as on input wrappers. It preserves the selected light direction.

Matte

Use edgeStyle: 'matte' for a softer, quieter border.

Customize the highlight

Each surface uses its own text color, even when nested, and follows its element's border radius. Set color to override the highlight, or intensity to multiply the shared light strength. Use shadowColor="transparent" to remove the opposite-edge shadow. borderWidth changes the decoration thickness in pixels, not the element's border. Pass options to Edge.Surface; no CSS variable declarations are needed.

The effect approximates a direction on axis-aligned rectangles, not a physical point light. Near the center, directional intensity fades over a region proportional to the surface size.

For existing decorations and input wrappers, see Integration considerations.