Backgrounds

Use Design → Decorations → Background to build an element’s background from a solid base color and an ordered stack of gradients, patterns, or images. Existing background colors and images continue to work and can be combined with the newer fill types.

The solid color is painted at the bottom. Background layers appear above it in the order shown in the panel, with the first layer at the top of the stack.

Add a background

1. Select the section, container, or other element you want to style.
2. Open the Design tab in the right sidebar.
3. Expand Decorations.

4. Choose the solid color, then click the + beside Background to add a Gradient, Pattern, or Image layer.

5. Edit the selected layer and check the result on the canvas.

Expected result

The selected element shows the solid color and every background layer in the stack. The background is saved with the project and included in exports.

A gradient layer combines its own controls with the solid background color beneath it.

Set the solid background color

The color control at the top of Background sets the base background-color. Choose a semantic color from Theme to keep the fill connected to your site’s design intent, choose an exact shade from Palette, or choose Custom for a one-off value. The same swatch picker is used for gradient stops and pattern colors, and its gear button opens Settings → Theme.

A solid color remains useful when layers are present:

• transparent areas in a gradient or pattern reveal it
• an image that fails to load still has a deliberate fallback surface
• blend modes combine layers with the color underneath

Background color supports the active responsive breakpoint, state, and dark-mode editing context. For example, you can use a light base color normally and a dark base color while the canvas is in dark preview.

Work with the layer stack

Each layer row includes a preview swatch, its type, and controls for ordering or deleting it:

Control	What it does
Click a layer row	Selects that layer and opens its editor below the stack.
Type menu	Changes an existing layer between Gradient, Pattern, and Image.
Up and down arrows	Moves the layer toward the front or back of the background stack.
Trash	Removes only that layer. The solid color and other layers remain.
− beside Background	Clears the background layers and solid color in the active context.

New layers are added at the top of the stack. Because the first layer is painted in front, an opaque image or gradient can hide layers below it. Reorder the stack or introduce transparency when you want the layers to combine.

Backgrounds follow the editing context

Layer stacks can inherit from the base style and be overridden for a responsive breakpoint or state such as Hover. The solid background color also supports dark-mode overrides. Gradient, pattern, and image layer stacks are shared between light and dark preview, so use theme-aware colors inside them when they need to adapt to both modes.

Create gradients

Add a Gradient layer, then choose one of three gradient types:

Type	Options
Linear	Set the angle from 0–360°.
Radial	Choose Circle or Ellipse, then drag the focal point to set its center.
Conic	Set the angle and drag the focal point to position the gradient’s center.

Turn on Repeating to repeat the gradient instead of stretching it once across the element.

Edit gradient color stops

Every gradient starts with at least two color stops. You can:

• click a stop marker to select it
• drag a marker along the preview bar, or enter its 0–100% position
• select a theme color or custom color for the active stop
• click an empty part of the preview bar to insert a stop there
• click Add stop to add another stop
• delete a selected stop when the gradient has more than two

Theme colors are especially useful for gradients because the layer can follow changes to the site’s palette instead of storing only fixed hex values.

Add patterns

Add a Pattern layer and choose a preset. Pattern colors can use theme colors or a custom value.

Preset	Available controls
Dot grid	Color, opacity, dot size, and gap
Stripes	Color, opacity, angle, and stripe width
Grid lines	Color, opacity, line thickness, and gap
Checkerboard	Color, opacity, and tile size

Pattern opacity affects the marks, not the element’s entire background. This lets the solid color, gradient, image, or other layer beneath it remain visible.

Pattern presets expose the measurements that matter for that pattern.

Use a background image

Add an Image layer and click Select image to open the asset picker. Choose an existing image or upload one first from the Assets tab. After an image is selected, use Change to replace it without rebuilding the layer.

The image layer preserves Swebsy’s existing background-image workflow. It also gains the same position, repeat, attachment, size, and blend controls used by other background layers.

Use Image components for meaningful content

A background image is decorative and does not have alt text. If an image is part of the page’s meaning, add an Image component instead and provide useful alt text.

Handle existing unsupported CSS

Swebsy preserves existing background-image values that the visual editors cannot recognize. These appear as Unsupported CSS layers instead of an editable background type. Switch the layer to Gradient, Pattern, or Image to replace it, or remove the layer.

A compound background shorthand that cannot be split safely appears under a Legacy background shorthand warning. Edit or clear that raw value before using structured background layers.

To add a new advanced background effect with CSS, use Settings → Advanced → Custom CSS instead of the Background layer menu.

Open the More controls

Select a layer and click More to adjust how it is painted:

Control	Options and behavior
Repeat	no-repeat, repeat, repeat-x, repeat-y, space, or round
Position	Center, an edge, or one of the four corners
Attachment	scroll, fixed, or local
Size	A CSS size such as auto, cover, contain, or another valid value
Blend	Normal plus Multiply, Screen, Overlay, Darken, Lighten, and other blend modes

Size appears for gradients and images. Pattern presets calculate their own size from controls such as Gap or Size, so they do not show a separate Size field.

The full Blend list is Normal, Multiply, Screen, Overlay, Darken, Lighten, Color Dodge, Difference, Exclusion, Hue, Saturation, Color, and Luminosity.

Edit multiple elements or inherited backgrounds

When a background comes from a smaller breakpoint or the default state, the label shows inherited. Editing it creates a background stack for the active breakpoint/state; clearing that override reveals the inherited background again.

When selected elements have different backgrounds, the panel shows mixed. Editing a layer applies the resulting stack to every selected element.

Common issues

A lower layer is not visible — the layers above it are opaque. Move the layer upward, add transparency to the upper layer, or use a blend mode.

The pattern is too strong — reduce the pattern’s Opacity. This changes the pattern marks without fading the content or solid color.

A background image is cropped — open More and change Size to contain, or adjust Position. Use cover when filling the whole surface matters more than showing the complete image.

A fixed background does not look fixed in the editor — test it in Preview mode or on the exported site. Editor canvas scrolling is separate from page scrolling.

Changing the gradient in dark preview also changed light mode — layer stacks are shared between light and dark. Use theme-aware stop colors so the gradient adapts, or use Advanced CSS for separate dark-mode layer values.

The panel says Legacy background shorthand — the existing background value combines several CSS properties in a form the structured editor cannot safely split. Edit or clear the raw value before adding structured layers.