Backgrounds, Borders and Effects

The color swatch writes background-color. It accepts hexadecimal, RGB and HSL values, an alpha channel, and, since the introduction of variables, a color variable chosen from the variable picker. Using a variable keeps the color in the site’s design tokens, so a rebrand or a dark mode changes it in one place (see Variables and Modes).

The second rule shows the form written when a variable is chosen. The exact name Webflow generates depends on the variable collection and group names, so it is read from the Designer rather than guessed.

Source: Webflow Help Center: Background styles

An image layer is added with the plus button of the Backgrounds section and chosen from the Assets panel or uploaded from the computer. The layer then exposes the settings that map to the CSS background properties.

For the Fernbrook hero, a photograph is set to Cover, centered, no-repeat. The generated rule is:

The identifiers in the URL are placeholders: Webflow assigns real ones when the file is uploaded, and they differ for every site.

Source: Webflow Help Center: Background styles

Three practical points follow from how background images work in the browser.

Setting the attachment to Fixed writes background-attachment: fixed, and the image stays in place while the page scrolls over it, which gives a simple parallax look. Two caveats apply. The browser sizes a fixed background against the viewport rather than the element, so Cover can crop differently than on the canvas. Fixed attachment is also handled differently by mobile browsers, some of which ignore it or repaint it expensively, so a hero that depends on it should be tested on a real phone. For a scroll-driven effect with more control, see Scroll and Page Animations.

Source: Webflow University: Background styles

A gradient is a layer like an image, added with the plus button and then configured. Webflow offers linear and radial gradients. A linear gradient has an angle and a list of color stops; each stop has a color (with alpha) and a position along the line. A radial gradient has a center, a shape and stops. Gradients are written as linear-gradient() and radial-gradient() values inside background-image, so they are resolution independent and cost no download.

The Fernbrook hero needs a dark veil that is strongest at the bottom, where the headline sits. That is a linear gradient from transparent to a translucent dark green, placed above the photograph in the layer stack:

Each layer has its own position, size and repeat value, which is why the other background properties become comma-separated lists with one item per layer. The first item of every list belongs to the gradient and the second to the photograph. If the layers are reordered in the panel, Webflow reorders all the lists together.

Source: Webflow University: Background styles overview

The gradient above is the simplest overlay and needs no extra element. Two other ways are common and differ in what they cost.

The gradient approach is the better default: it adds no element to the page, keeps the markup clean for screen readers and survives being exported with the rest of the stylesheet.

The Clipping dropdown at the bottom of the Backgrounds section limits where the background is painted. None is the default and paints out to the border edge. Clip to padding stops the paint at the border. Clip to text paints the background only where the glyphs are, which turns a gradient or a photograph into the fill of the text. Webflow introduced the clipping control in a product update, so older tutorials fill text only by using an image of the text or a Code Embed.

For the Fernbrook headline, a green-to-gold gradient fills the letters:

The text color must be transparent for the fill to show, and Webflow writes this when Clip to text is chosen. Clipped text is a decorative treatment and it is the contrast of the weakest stop that counts: if one end of the gradient is pale on a pale page, part of the headline becomes unreadable, and when background painting is switched off (high-contrast modes) the headline can disappear. Keep clipped text for large headings and test it in a forced-colors mode.

Source: Webflow updates: Fill text with gradients, images and overlays with background clipping

A background image can be bound to a CMS image field, so each item of a Collection has its own. In the Designer, the section or Div Block is placed inside a Collection list item or on a Collection template page, and the background image is connected to the field in the Style panel. Webflow cannot write a CSS rule per item in the stylesheet, so for these cases the page carries the image as an inline style attribute on the element.

This is the reason why a CMS-driven background cannot be changed per breakpoint by the stylesheet alone, and why it is a poor choice for the largest image of a page: it has no srcset, no lazy loading and no alt text. For content images, use an Image element bound to the field. Collections and fields are described in Collections and Field Types.

Source: Data API: Create Items

Opacity writes opacity as a percentage from 0 to 100, which Webflow stores as a number between 0 and 1. The value applies to the element and everything inside it, including its text and children, which is the difference from a translucent color: rgba(0, 0, 0, 0.5) on a background makes only the background translucent, while opacity: 0.5 fades the whole subtree. Elements with an opacity below 1 also create a stacking context, which can change which element sits on top of which.

A fully transparent element (opacity 0) is invisible but still takes up space, still receives clicks and is still read by screen readers. To remove an element from the layout, use Display: none; to hide it from assistive technology as well, see Accessibility.

Source: Webflow Help Center: Effects

The Blending control writes mix-blend-mode. It decides how the element’s pixels combine with what is painted behind it (its parent’s background and earlier siblings). Webflow lists the sixteen blend modes of the CSS specification: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity. Multiply darkens, screen lightens, and overlay increases contrast; the others are for special effects.

Blending is the reason why a white-background illustration, saved as a JPEG, can sit on a colored section: with multiply the white drops out. The background layers have their own background-blend-mode, which blends the layers of one element’s backgrounds with each other and not with the element behind.

Source: Webflow Help Center: Effects

Shadows are layers. Each has a type (outside, the default, or inside, written with the inset keyword), a horizontal and a vertical offset, a blur, a size (the CSS spread) and a color with alpha. Several shadows can be stacked, which produces the natural two-layer shadows of modern interfaces: a tight dark one for contact and a wide pale one for ambient light.

The last rule is the "border that takes no space" mentioned earlier: an inside shadow with no blur draws a line on the bottom edge without changing the element’s size. Shadows do not take up space, do not push siblings and are clipped by an ancestor that has overflow hidden. Animated blurs are slow, because the browser repaints the shadow at every frame, so it is the transform and opacity of a card that should be animated, and the shadow should change with a short transition or be swapped by the state rather than animated across a long duration.

Source: Webflow Help Center: Effects

Filters apply to the element and its descendants, after they are painted. The control writes filter with a list of functions, and each function has its own slider.

The difference between a Box shadow and the Drop shadow filter is the shape: a box shadow follows the rectangle of the element, a drop shadow follows the pixels. The order of the functions matters because they are applied in sequence. A filter, like opacity, creates a stacking context and applies to the whole subtree. Heavy blurs on large elements, or on elements that animate, are among the most expensive things a page can ask a phone to do.

Source: Webflow Help Center: Effects

A backdrop filter writes backdrop-filter and applies its functions to whatever is behind the element, seen through the element’s transparent or translucent parts, instead of to the element itself. This is the "frosted glass" effect. Webflow labels the feature as beta in its Help Center, and notes that the styles do not display properly in Firefox, in the Designer or on a published site, until that browser supports them. The set of functions is similar to that of filters (blur, brightness, contrast, color shifts), and the number listed has changed between Help Center versions, so the panel itself is the reference.

The Fernbrook booking card uses a blurred backdrop over the hero photograph:

The effect only shows if the element’s own background is translucent: with an opaque background there is nothing to see through. Because the effect is not available everywhere, the card must also be readable without it, which is why the background color above is chosen with enough opacity to hold the text on its own. A backdrop filter is a good example of a progressive enhancement.

Source: Webflow Help Center: Backdrop filters

The 2D and 3D transforms control writes transform, with four kinds of transformation that can be stacked on one element: Move (translate), Scale, Rotate and Skew. Each kind has its own fields for the X, Y and Z axes where meaningful. A transform moves the painted result of an element and not its place in the layout: the neighbours do not move, the element’s original space stays reserved, and a transformed element can overlap others.

The ellipsis next to the section opens the settings that make 3D transforms useful: the transform origin (the point around which rotation and scaling happen, default the center), the backface visibility (whether the reverse side of a rotated element is drawn), the self perspective (perspective on the element itself) and the children perspective (the perspective given to the element’s children, which is what makes a flipping card look three-dimensional).

Webflow writes the three-dimensional forms (translate3d, scale3d) even for flat motion. Transforms and opacity are the two properties that browsers can animate on the compositor without recalculating layout, which is why they are the right properties to animate on hover. A transform on an element also creates a containing block for fixed-positioned descendants and a stacking context, which breaks fixed headers placed inside a transformed ancestor.

Source: Webflow Help Center: Effects

A transition animates the change of a property when an element moves from one state to another, for example from normal to hover. By default no transition is set, which means the change is instant. In the Transitions section a transition is added per property (or for All properties), and each has a duration, an easing curve and a delay. Webflow writes the transition shorthand.

The transition belongs on the base state, not on the hover state: it is the rule of the destination state that supplies the new values and the rule of the origin that says how to get there. If the transition is placed only on hover, the pointer entering is animated but leaving is instant. The options of the shorthand, the order of its values and the newer transition-behavior property are in CSS Transitions.

Two choices keep transitions healthy. Name the properties that change instead of using All, because All animates things that nobody intended (a width that changes with a breakpoint, a color variable switching with a mode). And respect visitors who ask for reduced motion: the Designer has no switch for it, so a small custom-code rule such as the one below turns transitions and transforms off for them.

Longer, sequenced and scroll-driven motion is not a transition; it is built with interactions, covered in Scroll and Page Animations and Interactions with GSAP.

Source: Webflow Help Center: Effects