The visual layer behind an element’s content, which can include solid colors, gradients, images, videos, or combinations of these. Backgrounds establish visual hierarchy and mood while providing contrast for readable text. Framer supports multiple background layers, allowing you to combine images with color overlays and blend modes for sophisticated effects.

A setting that determines how an element’s colors interact with the layers beneath it, such as multiply, screen, overlay, or difference. Blend modes enable creative effects like color tinting images, creating texture overlays, and building complex visual compositions. Experiment with blend modes in Framer to achieve effects that would otherwise require image editing software.

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.

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.

A CSS property controlling whether an element responds to mouse and touch interactions, useful for making elements click-through or non-interactive. Disable pointer events for decorative overlays that shouldn’t block underlying interactions. Be cautious—removing pointer events can create accessibility issues.

A CSS property controlling stack order when elements overlap, with higher values appearing in front of lower values. Z-index management becomes complex with many overlapping elements—establish systematic layer naming. In Framer, layer order in the sidebar determines stacking with z-index overrides available.