Opacity

The transparency level of an element, ranging from 0% (invisible) to 100% (fully opaque). Reduce opacity to create overlays, de-emphasize secondary content, or build layered visual effects. Animate opacity for smooth fade-in and fade-out transitions.

Related terms

Related terms

  • Fill

    Design

    The color, gradient, or image that fills the interior of a shape or element. Multiple fills can be layered with different blend modes for complex visual effects. Framer’s fill controls support solid colors, gradients, and images with positioning, scaling, and opacity options.

  • Scroll-Linked Animation

    Motion

    Animation properties that change continuously based on scroll position, creating smooth parallax and reveal effects. Scroll-linked animations tie element properties like opacity, scale, or position to scroll progress. Use sparingly for performance and respect reduced motion preferences.