Glass

Glass brings the modern glass aesthetic into your design. By simulating how glass prisms bend light, it produces striped distortions across the surface. Flowing streaks, color dispersion, and shimmering effects add finesse and elegance, giving your work a polished, contemporary appeal.

Property Controls

Stripe (Number: 0 - 200)

Number of stripes.

Angle (Number: 0 - 360)

Angle of the stripes.

Distortion (Number: 0 - 1)

Stripe distortion intensity. Increase this value to create wave-like effects.

Drift (Number: -1 - 1)

Stripe drift intensity. Increase this value to create a fractured visual effect.

Advance: Contortion (Number: -1 - 1)

Stripe bending intensity. Adjust this value to curve the stripes.

Advance: Disturbance (Number: 0 - 1)

Stripe spacing disturbance. Introduces randomness to stripe spacing.

Advance: Offset (Number: -1 - 1)

Stripe position offset. This significantly alters the stripe layout.

Advance: Shadow (Number: 0 - 1)

Shadow intensity along the stripes. Stronger near distorted areas and affected by Drift.

Advance: Dispersion (Number: 0 - 1)

Color dispersion intensity. Stronger near distortion and affected by Distortion/Drift.

Advance: Reflection (Number: 0 - 1)

Highlight intensity. Stronger near distorted areas, affected by Distortion/Drift.

Advance: Blend (Boolean: Yes/No)

Blend highlight effect. Toggles whether highlights overlay on media content.

Distortion
Component
Media

Image

Video

Image
Upload
Fit
Stripe
Angle
Distortion
Drift
Advance

Advance

Animation

Appear

Transition

Spring

Accessibility

Spring

Advance
Contortion
Disturbance
Offset
Shadow
Affected by Drift.
Dispersion
Affected by Distortion/Drift.
Reflection
Affected by Distortion/Drift.
Animation
Type
Custom

Custom

Custom
Enable

Yes

No

Customize the animation target value for each property.
Stripe
Angle
Distortion
Drift
Contortion
Disturbance
Offset
Shadow
Dispersion
Reflection
Transition

Instant

Ease

Spring

Accessibility
Aria Label

Yes

No

Compatibility

Yes

No

Disable effects and use regular image/video elements. e.g. use on Phone layout for better performance.
Reduce Motion

Allow

Block

Whether to allow Reduce Motion to control animation.
Renderer

Auto

Always

Control when the renderer will render.
Glass
Glass
Distortion
Component
Media

Image

Video

Image
Upload
Fit
Stripe
Angle
Distortion
Drift
Advance

Advance

Animation

Appear

Transition

Spring

Accessibility

Spring

Advance
Contortion
Disturbance
Offset
Shadow
Affected by Drift.
Dispersion
Affected by Distortion/Drift.
Reflection
Affected by Distortion/Drift.
Animation
Type
Custom

Custom

Custom
Enable

Yes

No

Customize the animation target value for each property.
Stripe
Angle
Distortion
Drift
Contortion
Disturbance
Offset
Shadow
Dispersion
Reflection
Transition

Instant

Ease

Spring

Accessibility
Aria Label

Yes

No

Compatibility

Yes

No

Disable effects and use regular image/video elements. e.g. use on Phone layout for better performance.
Reduce Motion

Allow

Block

Whether to allow Reduce Motion to control animation.
Renderer

Auto

Always

Control when the renderer will render.
Glass
Glass
Distortion
Component
Media

Image

Video

Image
Upload
Fit
Stripe
Angle
Distortion
Drift
Advance

Advance

Animation

Appear

Transition

Spring

Accessibility

Spring

Advance
Contortion
Disturbance
Offset
Shadow
Affected by Drift.
Dispersion
Affected by Distortion/Drift.
Reflection
Affected by Distortion/Drift.
Animation
Type
Custom

Custom

Custom
Enable

Yes

No

Customize the animation target value for each property.
Stripe
Angle
Distortion
Drift
Contortion
Disturbance
Offset
Shadow
Dispersion
Reflection
Transition

Instant

Ease

Spring

Accessibility
Aria Label

Yes

No

Compatibility

Yes

No

Disable effects and use regular image/video elements. e.g. use on Phone layout for better performance.
Reduce Motion

Allow

Block

Whether to allow Reduce Motion to control animation.
Renderer

Auto

Always

Control when the renderer will render.
Glass
Glass

Glass

Glass brings the modern glass aesthetic into your design. By simulating how glass prisms bend light, it produces striped distortions across the surface. Flowing streaks, color dispersion, and shimmering effects add finesse and elegance, giving your work a polished, contemporary appeal.

Get Start

Learn about the properties, controls, and usages.

Troubleshooting

Check out our support page or contact us for solutions.

Reveals Cool WebGL Effects Components for Framer - Glass

Stay updated.

Stay updated.

Stay updated.

Subscribe to our newsletter to stay up to date and to receive important updates.

Subscribe to our newsletter to stay up to date and to receive important updates.

Subscribe to our newsletter to stay up to date and to receive important updates.

© 2025 Reveals. All rights reserved.

Create a free website with Framer, the website builder loved by startups, designers and agencies.

.framer-styles-preset-s5v84h { cursor: default !important; pointer-events: none; }