A CSS effect that applies visual filters like blur or color adjustment to the area behind an element, creating frosted glass or tinted overlay effects. This technique is popular for navigation bars and modal backgrounds that need to stand out while maintaining context with underlying content. In Framer, apply backdrop filters through the Fill properties to create modern, layered interfaces.

A CSS effect that adds shadow beneath or around an element, creating depth and visual separation from the background. Shadows help establish hierarchy by making elements appear to float above the page surface. Framer offers detailed shadow controls including multiple shadows, inner shadows, and variables for consistent elevation systems.

The difference in luminance between foreground and background colors, critical for text readability and accessibility. WCAG guidelines require minimum contrast ratios of 4.5:1 for normal text and 3:1 for large text. Use contrast checking tools to ensure your color combinations are accessible to users with visual impairments. See Understanding contrast ratio.

A parent element that holds and organizes child elements, defining boundaries for layout and positioning. Containers with maximum widths prevent content from becoming too wide on large screens while allowing full-width backgrounds. Framer's containers support auto layout, padding, and responsive size controls for flexible layouts.

A gradual transition between two or more colors, creating depth, dimension, and visual interest. Gradients add sophistication to backgrounds, buttons, and text without requiring images. Framer supports linear, radial, and angular gradients with multiple color stops and precise positioning.

A grainy texture effect added to backgrounds or elements for visual interest and tactile quality. Subtle noise can add depth and sophistication, reducing the flatness of solid colors. Apply noise sparingly—heavy noise can look dated and affect performance.

A scrolling effect where background elements move slower than foreground elements, creating an illusion of depth. Parallax adds visual interest and engagement but can impact performance and cause motion sickness. Use parallax sparingly and provide reduced-motion alternatives for accessibility. See Creating parallax with Scroll Speed in Framer.

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.

A distinct content area of a page, typically spanning full width and containing related information. Sections organize long pages into digestible chunks with clear visual separation. Design sections with consistent spacing, backgrounds, and layouts that create rhythm as users scroll.

Visual enhancements applied to text including shadows, gradients, outlines, and animations. Text effects can add personality and emphasis but should maintain readability. Use effects sparingly and test at various sizes and backgrounds.

An overlay that displays enlarged images or media while dimming the background, focusing attention on the content. Lightboxes are ideal for galleries and detailed image viewing without leaving the page. Ensure lightboxes are keyboard accessible with clear close mechanisms.

The perceived heaviness of an element based on size, color, contrast, and complexity, affecting visual balance. Understanding visual weight helps create balanced compositions without symmetry. Use visual weight to guide attention and establish hierarchy.

The arrangement of elements to show their order of importance through size, color, contrast, and position. Strong hierarchy guides users through content in the intended order and highlights key actions. Squint at your design—hierarchy issues become obvious when details blur.

A visual collage of images, colors, typography, and textures capturing the intended look and feel of a project. Mood boards align stakeholders on aesthetic direction before detailed design begins. Create mood boards to explore and communicate design concepts efficiently.

Analogous Colors are color combinations made from adjacent hues on the color wheel, often used to create cohesive and low-contrast visual systems.

An Appendix is supplemental material attached to the end of a document or guide to provide deeper context, references, or background information.

Inclusion is a design principle focused on creating experiences that are welcoming, usable, and respectful for diverse users and contexts.

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

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.

In Framer, radial gradients can highlight sections, create soft glows, add background atmosphere, or draw attention to important content without adding image assets.