How do I add a gradient background in Webflow?

Add a linear gradient in Backgrounds

Select the element that should carry the color. A section or a div is the usual choice. Webflow does not offer this background on media elements such as an image or a video. Most other elements start with a transparent background, so the gradient is what visitors will see.

Open the Style panel and go to Backgrounds. Click the plus icon beside Image and gradient, and set Type to Linear gradient. A linear gradient fades in one direction. The angle is that direction.

You can change the angle in three ways. Drag the dot on the direction dial, or click the dial to place the dot. Use the arrows to rotate the angle in 45 degree steps. Or type a number in the angle field. Turn it until the fade runs the way you want. The field does not label which edge is the start, so judge it on the canvas.

Example: a hero section uses two stops, a deep blue and a pale blue. Rotate the angle until the pale stop sits along the bottom of the section and the heading still has enough contrast to read.

Set the stops, then repeat or reverse them

Each stop is a point where you set a color and an opacity. Click a stop on the gradient bar and use the color picker. Click an empty part of the bar to add another stop. Drag a stop along the bar to move it. The space between stops is the fade.

To remove a stop, long click it and drag it off the bar until the edges of the stop become transparent, then let go. Leaving a stop at the end of the bar is not the same as deleting it.

Repeat tiles the current gradient. It uses the positions of the first and last stops. If those stops sit on the edges, the repeat is hard to see. Drag the first or last stop inward, then turn Repeat on, and the bands show up. Reverse flips the order of the stops without making you rebuild them.

A class on the section keeps the gradient on every hero that shares that class. If only one hero should fade, put the gradient on a combo class for that instance. The combo class guide shows how to add that second class.

Use a radial gradient when the fade is a circle

In the same Type control, choose a radial gradient when the color should spread in a circle instead of a line. The stop on the left of the bar is the color at the center.

Set the focal point by clicking a dot in the position control, or type a horizontal position (left) and a vertical position (top). The units are px, % (the default), vw, and vh.

Size controls how far the circle runs against the element:

• Closest side: from the center point to the closest side.
• Closest corner: from the center point to the closest corner.
• Farthest side: from the center point to the farthest side.
• Farthest corner: the default. From the center point to the farthest corner.

A radial fade behind a centered heading often wants the position dot in the middle, with Farthest corner left as the size, so the color reaches the corners of the section.

Layer it over a color or a photo

A gradient can stand on its own, or it can sit on top of a background color or a background image. Lower the opacity of a stop and whatever is underneath shows through. If that layer is a photo, the background image guide covers cover, position, and repeat. This page is only the gradient.

You can also add a color overlay and set its opacity in the color picker. Stack more than one image, gradient, or overlay if you need them. Hover a layer and drag the dotted vertical line on its left to reorder the stack. The eye icon hides a layer without deleting it. The trash icon removes it.

Check a transparent stop in Safari before you publish. Webflow notes that Safari treats a fade to transparent as transparent black, so a stop you meant to be clear can look black for those visitors. A pale solid color is the safer second stop when the section has no photo underneath.

To fill only the letters, put the linear gradient on the heading, then set Clipping to Clip background to text. That clip is for text. A section background should leave Clipping alone so the gradient fills the box.

Publish, then read the heading on top of the fade

Preview the section on desktop and on a phone width. A wide hero and a narrow hero crop the fade differently, so confirm the heading still sits on a color that it can be read against. Publish and open the page in Safari as well as in the browser you design in.

If a campaign needs the same fade updated later, send the class name and the two colors in writing. I can change the stops from that note. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Communication is asynchronous and written only. There are no calls or meetings.