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

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.

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