Blend modes

Framer blend modes can create richer visual treatments by letting text, shapes, images, and effects interact with the colors underneath them.

Related terms

Related terms

  • 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.

  • Blend Mode

    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.

  • 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.