Component
Interactive Gradient Blinds Component for Framer
This is a Framer recreation of the interactive gradient blinds component, originally created by David Haz. It is fully customizable and lets you add smooth gradient transitions to your designs for a modern, immersive feel.
Created by
About the resource
To use this component, you can fine-tune every detail of the gradient blinds effect to match your design needs. Resolution adjusts how sharp or smooth the effect looks—lower values give a pixelated, faster render, while higher ones create silky transitions at the cost of performance. Amount controls the number of strips, so you can choose between wide, bold blinds or many thin ones. With Angle, you can rotate the entire gradient from 0° to 360° to shift its direction.
Add character with Noise, which introduces grain for a textured feel, or keep it clean with lower values. Waveness lets you bend the rules by making the strips ripple in organic waves, while Direction switches the flow between left and right. For gradient behavior, No mirror gives a standard fade, while Mirror reflects the gradient for a symmetrical look.
The Spotlight group gives you interactive control: Radius changes the spotlight size, Smoothing makes the motion more fluid, Presence defines how strong it appears, and Opacity adjusts the visibility of blinds within the spotlight area.
Finally, the Colors section is where you set your palette. Pick anywhere from 2 to 8 shades with Palette Size, choose a Background color, and customize each gradient stop (Color 1–8) to create the perfect blend for your design.
About the resource
To use this component, you can fine-tune every detail of the gradient blinds effect to match your design needs. Resolution adjusts how sharp or smooth the effect looks—lower values give a pixelated, faster render, while higher ones create silky transitions at the cost of performance. Amount controls the number of strips, so you can choose between wide, bold blinds or many thin ones. With Angle, you can rotate the entire gradient from 0° to 360° to shift its direction.
Add character with Noise, which introduces grain for a textured feel, or keep it clean with lower values. Waveness lets you bend the rules by making the strips ripple in organic waves, while Direction switches the flow between left and right. For gradient behavior, No mirror gives a standard fade, while Mirror reflects the gradient for a symmetrical look.
The Spotlight group gives you interactive control: Radius changes the spotlight size, Smoothing makes the motion more fluid, Presence defines how strong it appears, and Opacity adjusts the visibility of blinds within the spotlight area.
Finally, the Colors section is where you set your palette. Pick anywhere from 2 to 8 shades with Palette Size, choose a Background color, and customize each gradient stop (Color 1–8) to create the perfect blend for your design.
About the resource
To use this component, you can fine-tune every detail of the gradient blinds effect to match your design needs. Resolution adjusts how sharp or smooth the effect looks—lower values give a pixelated, faster render, while higher ones create silky transitions at the cost of performance. Amount controls the number of strips, so you can choose between wide, bold blinds or many thin ones. With Angle, you can rotate the entire gradient from 0° to 360° to shift its direction.
Add character with Noise, which introduces grain for a textured feel, or keep it clean with lower values. Waveness lets you bend the rules by making the strips ripple in organic waves, while Direction switches the flow between left and right. For gradient behavior, No mirror gives a standard fade, while Mirror reflects the gradient for a symmetrical look.
The Spotlight group gives you interactive control: Radius changes the spotlight size, Smoothing makes the motion more fluid, Presence defines how strong it appears, and Opacity adjusts the visibility of blinds within the spotlight area.
Finally, the Colors section is where you set your palette. Pick anywhere from 2 to 8 shades with Palette Size, choose a Background color, and customize each gradient stop (Color 1–8) to create the perfect blend for your design.
The gradient blinds component properties in Framer.
The gradient blinds component properties in Framer.
The gradient blinds component properties in Framer.
