SOCIAL

Glass

✕
Flat
Btn Rad40
Btn Sqr2.00
Btn Pad0.40
Pnl Rad30
Pnl Sqr3.30
Fill0.20
Border0.06
Blur0.60
Lightness0.15
Shadow0.50
Pad0.80
Siri0.50
Warp0.00
Light1.00
Flow0.60
Bold0.80
Opacity0.35
Blur2.00
Offset Y0.50
Width128
Presets
Shared
Size200
Focus0.60
Light0.36
Light Z0.40
Follow700
Damp26
Snap330
Bounce17
Stretch0.90
Bulge0.22
Presets
glass · mesh
Btn Rad29
Btn Sqr2.00
Btn Pad0.34
Pnl Rad39
Pnl Sqr6.50
Opacity0.80
Clear1.00
Spread0.42
Amount1.00
Refract3.00
IOR1.00
Chroma1.00
Irid0.10
Lighten-0.40
Shadow1.00
Siri0.11
Warp0.35
Light0.00
Flow0.05
Refract1.50
Chroma1.20
Light0.95
Opacity0.20
Flow0.20
Refract4.00
Chroma3.00
Bounce1.40
Size0.40
Count10
Light2.85
Flow1.45
Bold1.00
Fill0.85
Letters0.00
Refract24
Edge0.06
Rim0.00
Spec1.39
Clarity1.00
Chroma2.00
Opacity1.00
Blur0.60
Opacity0.35
Blur2.00
Offset Y0.50
Width98
Presets
glass · sdf (drives live)
Btn Rad50
Btn Sqr2.30
Btn Pad0.31
Pnl Rad33
Pnl Sqr2.50
Edge5
Refract40
Chroma0.10
Irid0.05
Opacity0.80
Spread1.00
Amount1.00
Rim0.00
Specular0.40
Lighten0.02
Shadow1.00
Lens2.00
Siri0.11
Warp0.35
Light0.45
Flow0.45
Refract4.00
Chroma3.00
Light0.10
Opacity0.24
Flow2.45
Refract4.00
Chroma3.00
Bounce1.75
Size0.35
Count10
Light3.00
Flow1.85
Bold1.00
Fill0.85
Letters0.00
Refract24
Edge0.05
Rim0.12
Spec1.44
Clarity0.56
Chroma2.00
Opacity1.00
Blur0.01
Opacity0.35
Blur2.00
Offset Y0.50
Width94
Presets
Type
Title

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Subtitle
Flat

Mock · Sub · Title

glass · mesh

Mock · Sub · Title

glass · sdf

Mock · Sub · Title

Selection & drag
Nav buttons
Flat
glass · mesh
glass · sdf
Social buttons
Flat
Social
glass · mesh
Social
glass · sdf
Social
Photos view buttons
Flat
glass · mesh
glass · sdf
Model picker
Flat
glass · mesh
glass · sdf
Sort picker
Flat
Sort
glass · mesh
Sort
glass · sdf
Sort
Filter bar
Flat
42 / 240
glass · mesh
42 / 240
glass · sdf
42 / 240
Blog selector
Flat
  • Building a glass UIJun 2026Notes on SDF squircles and fog refraction.
  • XPan diariesMay 2026Shooting panoramic film for a year.
glass · mesh
  • Building a glass UIJun 2026Notes on SDF squircles and fog refraction.
  • XPan diariesMay 2026Shooting panoramic film for a year.
glass · sdf
  • Building a glass UIJun 2026Notes on SDF squircles and fog refraction.
  • XPan diariesMay 2026Shooting panoramic film for a year.
Buttons
Analytics button
Flat
glass · mesh
glass · sdf
Gallery back
Flat
glass · mesh
glass · sdf
Settings buttons
Flat
glass · mesh
glass · sdf
Surfaces & cards
Stats bar
Flat
1,240Photos
87%Analyzed
312Keywords
glass · mesh
1,240Photos
87%Analyzed
312Keywords
glass · sdf
1,240Photos
87%Analyzed
312Keywords
Colour bar
Flat
glass · mesh
glass · sdf
Hero bar
Flat
Primary subjecttop 3
Portrait412
Street298
Nature230
glass · mesh
Primary subjecttop 3
Portrait412
Street298
Nature230
glass · sdf
Primary subjecttop 3
Portrait412
Street298
Nature230
Chart card
Flat

Photos by category

category · sorted by frequency

Portrait
Street
Nature
Urban
Film
glass · mesh

Photos by category

category · sorted by frequency

Portrait
Street
Nature
Urban
Film
glass · sdf

Photos by category

category · sorted by frequency

Portrait
Street
Nature
Urban
Film
Tall panel
Flat
Luminance histogram
0 — 255
glass · mesh
Luminance histogram
0 — 255
glass · sdf
Luminance histogram
0 — 255
Keywords
Flat
sunset12portrait9urban7film6analog4mountains3ocean3street2golden hour
glass · mesh
sunset12portrait9urban7film6analog4mountains3ocean3street2golden hour
glass · sdf
sunset12portrait9urban7film6analog4mountains3ocean3street2golden hour
Table of contents
Flat
glass · mesh
glass · sdf

Flat / mesh-glass / SDF-glass columns now render their real styles — the mesh + SDF columns refract the live fog (tune each with its per-column panel). Next: wire the top toggle to the real site, and refine the flat column’s surface treatment.