New in Sketch — Independent borders, selection colors, and more Learn more

Skip Navigation

Glass

1 min read

The Glass effect gives a frosted-glass look, softly blurring what’s behind and letting background colors and shapes show through while keeping foreground content clear. To apply it, click circle.plus.semifilled next to Effects in the Inspector and choose Glass.

Customise every parameter of the Glass effect to get the exact look you want

Auto

Auto applies a standard frosted-glass appearance that closely matches what you’ll see in Apple’s operating systems. Use it when designing for Apple platforms.

Custom

Custom gives you full control over all the parameters that make up the effect, so you can match a specific aesthetic or fine-tune the look.

Use Auto when designing for Apple platforms. Switch to Custom when you need to match a specific visual or go beyond the default appearance.

An image showing the Glass effect with custom settings

With Custom you can control:

  • Blur: controls how much the background is blurred behind the element.
  • Distortion: adds a subtle waviness to the blurred content, as if viewed through uneven glass.
  • Depth: simulates the perceived thickness of the glass by affecting how sharp or diffuse the blur edges appear.
  • Chromatic aberration: introduces a slight color fringing along edges, mimicking the optical imperfections of real glass.
  • Brightness: increases or decreases the luminosity of the glass surface, making it lighter or darker. To reset the slider to its default value, double-click it.
  • Saturation: controls how vivid or muted the colors of the background content appear through the glass. To reset the slider to its default value, double-click it.
  • Specular highlights: adds a subtle reflective sheen to the surface, giving it a more polished, three-dimensional appearance.