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.

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.

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

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.

Empty space in a design that provides visual breathing room and separation between elements. Whitespace improves readability, focus, and perceived quality of designs. Resist filling every available space—whitespace is an active design element.

A compressed image format best suited for photographs and complex images with many colors and gradients. JPEG compression is lossy, meaning some quality is sacrificed for smaller files. Use JPEG for photos but prefer PNG for graphics with sharp edges, text, or transparency.

A minimalist design style emphasizing clean shapes, bright colors, and two-dimensional elements without shadows, gradients, or textures. Flat design emerged as a reaction to skeuomorphism and dominates modern digital interfaces. While visually clean, ensure sufficient visual hierarchy and affordances for usability.

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

Framer designs can use wide-gamut color values for more vivid accents and gradients on supported displays, helping modern sites feel brighter and more refined.

In Framer, squircle corner styling can make cards, buttons, and panels feel more refined by blending geometric structure with a softer edge profile.