Style

Compare the edge response

Choose Raised, Recessed or Matte to change how the card responds to the shared light. Move your pointer around it to compare the edge response. Your selection also updates the cards, code blocks and navigation surfaces across this site.

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

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

Style values

For additional settings, see the API reference.

Raised

Raised surfaces catch a highlight on the edge facing the light. Use edgeStyle: 'raised' for an outward-facing response.

Recessed

Recessed surfaces reverse the light direction. Use edgeStyle: 'recessed' for inset wrappers such as fields.

Matte

Matte surfaces use a softer directional response. Use edgeStyle: 'matte' when the border should remain quiet.

Customize the highlight

Edge preserves your component’s background, text color, radius and layout. Choose raised, recessed or matte for the decorative response.

Each surface uses its own text color by default, including inside another surface, and inherits its host border radius. Set color and intensity on a surface to customize that surface’s highlight. Set shadowColor to transparent on light surfaces if a dark opposite edge is unwanted. borderWidth controls the decorative thickness in pixels; it does not change the host border. Surface intensity multiplies the shared light intensity. Internal CSS variables are reserved for Edge; no CSS variable declarations are required in your application. In React, pass these options to Lighting.Surface.

The effect approximates lighting on axis-aligned rectangles. It is not a physically accurate point-light renderer. Directional intensity fades across a region proportional to the element size near the center, where a unique edge direction is ambiguous. The light follows a direction rather than simulating a local point light.

For existing decorations and input wrappers, see Integration.