Framer gradients are color blends you apply to fills, backgrounds, text, and borders directly in the Framer editor. Framer supports linear, radial, conic, and angular gradients, plus animated gradients, all set through the visual color picker with adjustable color stops, angle, and position, so you can build modern backgrounds and accents without writing any CSS.
Gradients are one of the fastest ways to make a site feel current and premium. A flat color section reads as plain; a well-judged gradient adds depth, guides the eye, and gives a brand its signature mood. Framer makes gradients approachable because every control is visual, but the difference between a gradient that looks polished and one that looks muddy comes down to a handful of decisions.
This guide covers every gradient type Framer offers, the exact editor steps to create and refine each one, how to apply gradients to text and borders, how to animate them, and the taste rules that keep gradients looking intentional. It is written for 2026, reflecting how Framer’s color tools work today.
Key takeaways
- Framer supports linear, radial, conic, and angular gradients, all editable through the visual color picker.
- You control the look with color stops, stop positions, angle, and opacity, with no CSS required.
- Gradients can fill backgrounds, text, borders, and overlays, and they can be animated for subtle motion.
- Two or three well-chosen stops usually beat many stops, which tend to look muddy.
- Use a subtle overlay gradient over images to keep text readable and the layout cohesive.
The gradient types Framer supports
Each gradient type creates a different sense of light and movement. Knowing what each one does lets you reach for the right one instead of fighting the default.
Linear gradients
A linear gradient blends colors along a straight line at an angle you set. This is the workhorse for section backgrounds, buttons, and cards. A gentle top-to-bottom blend adds depth without drawing attention; a diagonal blend feels more dynamic.
Radial gradients
A radial gradient blends outward from a center point in a circle or ellipse. It is ideal for spotlight effects, glowing accents behind a hero element, or a soft vignette that focuses attention on the middle of a section.
Conic and angular gradients
A conic gradient sweeps colors around a center point like a color wheel, which suits loaders, pie-style visuals, and bold abstract backgrounds. Angular gradients rotate the blend around an axis for a similar sweeping feel. Both read as more expressive and modern, so use them where a statement is wanted.
| Gradient type | Blend shape | Best used for |
|---|---|---|
| Linear | Straight line at an angle | Section backgrounds, buttons, cards |
| Radial | Outward from a center point | Glows, spotlights, vignettes |
| Conic | Sweep around a center point | Loaders, abstract hero art |
| Angular | Rotation around an axis | Expressive accents, modern backgrounds |
How to create a gradient in Framer, step by step
Every gradient starts from the fill control, and the workflow is the same whether you are filling a background or a shape.
- Select the frame, shape, or element you want to fill.
- In the right properties panel, click the color swatch next to Fill to open the color picker.
- At the top of the picker, switch the fill type from Solid to Gradient.
- Choose the gradient type: Linear, Radial, Conic, or Angular.
- Click the gradient bar to add color stops. Each stop has its own color and a position you can drag along the bar.
- Set the color and opacity of each stop. Lowering a stop’s opacity creates a fade to transparent, which is useful for overlays.
- For linear gradients, drag the angle control or type an exact degree value.
- For radial and conic gradients, drag the center handle on the canvas to reposition the focal point.
Refining color stops
The position of each stop controls where the blend happens. Bunching two stops close together creates a hard transition; spreading them apart creates a soft, gradual blend. For most backgrounds, two or three stops spread evenly gives the cleanest result. Adding many stops tends to introduce muddy gray zones where colors that are not adjacent on the color wheel mix.
Avoiding muddy blends
The most common gradient mistake is blending two colors that sit far apart on the color wheel, which produces a dull gray midpoint. Pick colors that are analogous (close on the wheel) for smooth blends, or add a third stop that shares hue with both ends to keep the midpoint clean. Gradients that share a similar lightness also blend more smoothly than ones that jump from very dark to very light.
Gradient text and gradient borders
Gradients are not limited to backgrounds. Applied to text and borders, they create signature brand details.
Gradient text
To fill text with a gradient, select the text layer, open the Fill control, and set a gradient just as you would for a shape. Framer clips the gradient to the letterforms. This works beautifully on a single hero headline or a key phrase. Keep gradient text large and bold so the blend is readable; small body text with a gradient fill becomes hard to read and hurts accessibility.
Gradient borders and strokes
A gradient border around a card or button is a refined accent. Apply a gradient to the Border or Stroke fill, keep the border width modest, and pair it with a solid or near-solid card background so the border reads cleanly. Gradient borders shine on pricing cards and feature tiles where you want one element to stand out.
Animating gradients
A slowly shifting gradient adds life to a hero without the weight of video or 3D. In Framer you can animate a gradient by animating the angle, the stop positions, or by layering a gradient inside a component that loops. Keep the motion slow and the color range tight so it reads as ambient rather than flashing. For the broader set of motion tools that pair with animated gradients, and which prebuilt effects are worth using, our roundup of the best Framer plugins and components includes gradient and background-motion components that save build time.
Performance note
Animated gradients are far lighter than video or 3D, but a continuously animating full-screen gradient still uses some CPU. Keep it to one animated gradient per viewport and slow the loop so it does not redraw aggressively. On mobile, consider a static gradient to preserve battery and frame rate.
Building a gradient system for your brand
Random one-off gradients make a site feel inconsistent. A small gradient system keeps everything cohesive.
- Define one or two signature gradients built from your brand colors and reuse them across sections.
- Save them as color styles in Framer so every instance updates if you adjust the brand.
- Set a default angle and stick to it so gradients feel like a family rather than a mix.
- Pair gradients with generous whitespace so they read as deliberate accents, not as noise.
Cohesion is what separates a designed site from a decorated one. When you commit to a gradient system and apply it with restraint, even a simple layout feels considered. Creative businesses that want this kind of polished, consistent look will find layouts that lean on gradient systems in our roundup of the best Framer templates for agencies.
Gradients over images
One of the most practical uses of a gradient is the image overlay. Place a linear gradient that fades from a semi-opaque dark color at the bottom to transparent at the top over a photo, and any text on top becomes readable regardless of the image. This single technique fixes the most common hero problem: white text disappearing into a bright spot in the photo. Set the bottom stop to your brand dark color at around 60 to 80 percent opacity and the top stop to fully transparent.
Gradient trends worth knowing in 2026
Gradient styling moves in cycles, and a few approaches read as current right now. Borrowing from them keeps a site feeling fresh without chasing every fad.
Soft, low-contrast mesh blends
Multi-point soft gradients, where several gentle color zones blend across a large area, give a hero an organic, almost atmospheric quality. The trick is keeping contrast low so the result feels like light rather than a hard pattern. Build these by layering a couple of radial gradients with low opacity over a base color.
Single-hue depth gradients
Rather than blending two different colors, many premium sites now use a gradient that runs from a darker to a lighter shade of one brand color. This adds depth and dimensionality while staying unmistakably on-brand, and it sidesteps the muddy-midpoint problem entirely because the hue never changes.
Gradient accents on neutral layouts
A clean, mostly neutral layout with one or two gradient accents, a gradient headline, a gradient button, a gradient glow behind a key visual, reads as confident and modern. The restraint is the point. The gradient draws the eye precisely because the rest of the page is calm. Consultants who want this confident, modern look can see it applied in our roundup of the best Framer templates for consultants, where gradient accents sit on calm, trust-building layouts.
Accessibility and contrast with gradients
Gradients can quietly break readability. Text placed over a gradient background must maintain enough contrast across the entire blend, including the lightest end. A headline that is readable over the dark part of a gradient can vanish over the light part. Check the lightest point of any gradient that sits behind text and confirm the text still clears accessibility contrast guidelines there. When in doubt, add a subtle overlay or a solid backing behind text rather than trusting the gradient alone. This protects the experience for visitors with low vision and signals genuine design care.
Frequently Asked Questions
Can I apply a gradient to text in Framer?
Yes. Select the text layer, open the Fill control in the right panel, switch from Solid to Gradient, and choose your type and color stops. Framer clips the gradient to the letterforms automatically. Gradient text works best on large, bold headlines; avoid it on small body text because the blend reduces contrast and readability.
How many color stops should a gradient have?
Two or three stops usually produce the cleanest result. More stops increase the risk of muddy gray midpoints, especially when the colors are far apart on the color wheel. If you need more than three, make sure adjacent stops share a similar hue or lightness so the blend stays smooth.
Do gradients hurt page speed in Framer?
Static gradients are rendered by the browser at almost no cost, so they have no meaningful effect on page speed or Core Web Vitals. Animated gradients use a little CPU, but far less than video or 3D. Keeping animated gradients to one per viewport and slowing the loop keeps performance healthy.
What is the easiest way to keep text readable over a photo background?
Add an overlay gradient. Place a linear gradient over the image that fades from a semi-opaque dark brand color at around 60 to 80 percent opacity to fully transparent. The darker area behind the text gives it contrast, so white or light text stays legible no matter what is in the photo.
If you want a Framer site with a polished gradient system and a brand that feels premium from the first scroll, Framer Websites designs and builds it for you. See our pricing or start a conversation through our contact page.