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.

A collection of reusable components, guidelines, and standards that ensure consistency across a product and team. Design systems speed up development, maintain brand coherence, and enable designers and developers to speak the same language. Framer supports design systems through components, variables, and styles.

Related AI terms: Find Similar Designs and AI Layer Renaming.

A design tool used to resize selected layers proportionally, often including typography and effects. It helps preserve visual relationships when scaling multi-element compositions.

A System Prompt is a top-level instruction layer that sets goals, boundaries, and response style before user messages are processed.

AI Layer Renaming automatically assigns meaningful layer names based on content and structure. This improves handoff, keeps files consistent with a Design System, and complements reusable Component Properties.

MCP transport is the communication layer an MCP client uses to talk to an MCP server, such as local stdio or network-based HTTP transport.

An agent bridge is the connection layer that lets an outside AI tool access a Framer project, including pages, components, and CMS content.

In external AI agent workflows, agent bridge helps teams move faster without losing control of structure, content, performance, or editable design details.

Agent bridge setup is the process of connecting an external AI tool to a Framer project so it can access project context and tools.

Agent bridge setup usually includes installing a connection layer, authorizing access, and confirming that the external tool can read or edit the correct project. It helps external agents work with pages, CMS content, and components without manual copy-paste.

In Framer, scroll effects let designers tie motion to page position, so sections can fade, move, scale, or transform as someone scrolls through the experience.

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

Framer’s transform controls can add dimensional motion and perspective to cards, mockups, and interaction states while keeping the elements editable on the canvas.

In Framer, background blur is useful for navigation bars, overlays, panels, and frosted UI where the page remains visible but visually softened behind the surface.

Framer overlays let designers build interactive layers that appear above or beside content, such as navigation drawers, tooltips, signup modals, and dropdown menus.

Framer auto sizing keeps cards, buttons, sections, and text groups flexible, making responsive layouts easier to maintain as content changes.

In Framer, sticky positioning is useful for sidebars, navigation aids, comparison panels, and storytelling layouts where one element should remain visible during part of the scroll.

In Framer workflows, exportable layers help teams move graphics, images, and design assets between site production, marketing, and documentation needs.

Framer masks help designers create image treatments, reveal effects, soft fades, and graphic compositions without flattening the work into static assets.

In Framer, multiplayer cursors make collaboration feel immediate by showing teammates’ presence on the canvas, helping teams design together without losing context.