Blend Mode
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.
Background
Design
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.
Effect
Effects
A visual modification applied to elements such as blur, shadow, glow, or blend mode that enhances appearance. Effects add depth, focus attention, and create sophisticated visual compositions. Use effects purposefully—overuse can slow performance and create visual clutter.
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.
Radial Gradient
Design
A color transition radiating from a center point outward in a circular or elliptical pattern. Radial gradients create depth, spotlight effects, and organic backgrounds. Combine with other fills and blend modes for sophisticated visual effects.
Theme
Design
A cohesive set of design choices—colors, typography, spacing—that can be applied across a site or component library. Themes enable consistent styling and support features like dark mode. Framer’s variables support theming through switchable value sets.
Blend modes
Design
Framer blend modes can create richer visual treatments by letting text, shapes, images, and effects interact with the colors underneath them.