Skip to content

Colors and Backgrounds

Colors and backgrounds define the visual surface of your elements -- what they look like behind and around their content. The Style panel provides dedicated controls for background color, background images, gradients, opacity, and related effects.

Two things to keep in mind:

  • Background properties do not inherit. Unlike text color, a child element does not automatically get its parent's background. Each element starts transparent.
  • Layering matters. You can combine a background color, one or more background images, and gradients on the same element. They stack in the order you define them.

Setting background color

Background-color fills the element's box (including the padding area, but not the margin) with a solid color. In Silex it appears as a full-width color picker in the Decorations sector.

You can enter values in several formats:

  • Hex: #ff6600, #f60 (shorthand)
  • RGB: rgb(255, 102, 0)
  • RGBA: rgba(255, 102, 0, 0.5) -- the fourth value is alpha (transparency from 0 to 1)
  • HSL: hsl(24, 100%, 50%)
  • HSLA: hsla(24, 100%, 50%, 0.5)
  • Named colors: red, transparent, currentColor

You can also apply a CSS variable to Background-color using the "+" button next to the property label. This is the recommended way to maintain a consistent color palette.

Setting text color

Color (in the Typography sector) sets the text color. It accepts the same formats as Background-color. Unlike background, Color is inherited -- set it on a parent and all text inside follows unless overridden.

See Typography for more on text styling.

Background images

The Style panel's Decorations sector includes built-in controls for Background-image. You can add one or more background images to an element, along with gradients.

When you add a background image, you can control:

  • Background-size: How the image scales. Common values: cover (fills the element, may crop), contain (fits entirely, may leave gaps), or specific dimensions.
  • Background-position: Where the image sits within the element. Common values: center, top left, bottom right, or specific percentages.
  • Background-repeat: Whether the image tiles. Values: repeat (tiles both directions), repeat-x (horizontal only), repeat-y (vertical only), no-repeat, space, round.
  • Background-attachment: Whether the image scrolls with the page or stays fixed. Values: scroll (scrolls with the element), fixed (stays in place relative to the viewport), local (scrolls with the element's content).

Full-width hero image: 1. Select a Section element. 2. Add a background image. 3. Background-size: cover. Background-position: center. Background-repeat: no-repeat.

The image fills the section regardless of its dimensions, cropping as needed to maintain its aspect ratio.

Gradients

Gradients are a type of background image. Silex uses GrapesJS's built-in gradient editor, which you can access within the background image controls.

CSS supports several gradient types:

  • Linear gradient: Colors transition in a straight line. You control the direction (angle or keywords like to right) and the color stops.
  • Radial gradient: Colors radiate outward from a center point.

Example -- a subtle gradient overlay: 1. Select the element. 2. Add a background with a linear gradient from rgba(0, 0, 0, 0.3) to transparent. 3. Set a background image underneath.

The gradient creates a darkened area (useful for placing readable white text over a photo).

Combining backgrounds

CSS allows multiple backgrounds on a single element. They are drawn in layers: the first one you define is on top, the last is at the bottom. Background-color is always behind all background images.

A common pattern:

  1. Background-color: a fallback color (visible while images load)
  2. Background-image layer 1: a semi-transparent gradient overlay
  3. Background-image layer 2: a photograph

Controlling opacity

Opacity controls the transparency of the entire element, including all its children and content. Values range from 0 (fully transparent) to 1 (fully opaque). It is found in the built-in GrapesJS extra properties.

Important: Opacity affects everything inside the element. If you only want a semi-transparent background while keeping text fully visible, use an RGBA or HSLA background color instead (e.g., rgba(0, 0, 0, 0.5) for a 50% transparent black background).

Box shadow

Box-shadow adds a shadow effect around an element's frame. GrapesJS provides a built-in composite editor for box-shadow where you control:

  • X offset: Horizontal position of the shadow
  • Y offset: Vertical position of the shadow
  • Blur radius: How blurred the shadow is (0 = sharp)
  • Spread radius: How much the shadow expands or contracts
  • Color: The shadow's color (use RGBA for semi-transparent shadows)
  • Inset: Whether the shadow is inside the element

Subtle card shadow: X: 0, Y: 2px, Blur: 8px, Spread: 0, Color: rgba(0, 0, 0, 0.1).

Elevated button on hover: Use a pseudo-class for :hover and increase the blur and offset.

CSS filters

Filter applies graphical effects like blur, brightness, and contrast to an element. Silex supports the following filter functions:

Function What it does
blur(px) Gaussian blur. Higher values = more blurry.
brightness(%) Adjusts brightness. 100% = original. 0% = black. 200% = twice as bright.
contrast(%) Adjusts contrast. 100% = original.
grayscale(%) Converts to grayscale. 0% = original. 100% = fully gray.
hue-rotate(deg) Rotates colors around the color wheel.
invert(%) Inverts colors. 100% = fully inverted.
saturate(%) Adjusts saturation. 100% = original. 0% = desaturated.
sepia(%) Applies a sepia tone. 0% = original. 100% = fully sepia.

You can chain multiple filters. They apply in the order listed.

Use case: A photo gallery where images are desaturated by default and become full-color on hover. Set filter: grayscale(100%) on the image, then use the :hover pseudo-class to set filter: grayscale(0%).

Border and border radius

The Decorations sector includes controls for borders (via the built-in GrapesJS border properties) and Border-radius.

Border-radius is a composite property with four corners:

Units: px, %, em, rem, vh, vw, cqi, cqb, cqw, cqh, cqmin, cqmax.

Fixed values: initial, inherit, auto.

Tip: Set all four corners to 50% to make a square element circular. For pill-shaped buttons, use a large value like 999px.

Outline

Outline draws a line outside the border. Unlike border, it does not take up space in the layout and can overlap other elements. It is a composite property with:

  • Outline-width: px, %, em; keywords: medium, thin, thick, inherit, initial, revert, unset.
  • Outline-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
  • Outline-color: any color value.

Accessibility note: Browsers use outline to indicate keyboard focus. Avoid removing outlines entirely (outline: none) unless you provide an alternative focus indicator. See the :focus pseudo-class for styling focus states.

Practical example: a card with visual depth

  1. Background-color: #ffffff (white).
  2. Border-radius: 8px on all corners.
  3. Box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08).
  4. On hover (via pseudo-class): Box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15). The card appears to lift toward the viewer.
  5. Image at the top: Background-image with Background-size: cover, inside a Div with a fixed height and Overflow: hidden to crop.

Common mistakes

  • Using Opacity when you want a semi-transparent background. Opacity affects the entire element and its children. Use RGBA/HSLA background colors for transparent backgrounds with solid text.
  • Forgetting a fallback background color. If the background image fails to load, users see nothing. Set a Background-color that works on its own.
  • Removing outlines without an alternative. Keyboard users lose their focus indicator. Style the outline instead of removing it.
  • Overusing box-shadow. Subtle shadows add depth. Heavy shadows on every element look cluttered.

Learn more

Advanced: CSS variable integration and responsive colors

Color variables

The CSS Variables plugin (grapesjs-css-variables) supports three variable types: color, size, and font-family. Color variables integrate with the Color property (typography) and the Background-color property (decorations), as well as sub-properties like Outline-color, Text-decoration-color, and Column-rule-color.

When a color variable is applied, the Style panel shows a purple pill with the variable name and a color swatch. You can clear the variable to return to a direct color value.

Responsive colors with breakpoints

Because CSS variables can be overridden per breakpoint (the plugin supports per-device values stored in @media (max-width: ...) rules on :root), you can define a color palette that changes at different screen sizes. For example, you could lighten a background color on mobile to improve contrast on smaller screens.

The currentColor keyword

currentColor is a special CSS value that refers to the element's computed Color value. Use it for borders, outlines, or shadows that should match the text color automatically. If you change the text color, those properties update too.

Reference: all color and background properties
Property Sector Type Values / Units MDN
Background-color Decorations color Any color value link
Color Typography color Any color value link
Background-image Decorations built-in URL, linear-gradient, radial-gradient link
Background-size Decorations built-in cover, contain, length link
Background-position Decorations built-in keywords, %, length link
Background-repeat Decorations built-in repeat, repeat-x, repeat-y, no-repeat, space, round link
Background-attachment Decorations built-in scroll, fixed, local link
Opacity Extra slider 0 to 1 link
Box-shadow Decorations composite X, Y, Blur, Spread, Color, Inset link
Filter Extra composite blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia link
Border-radius Decorations composite px, %, em, rem, vh, vw, cqi, cqb, cqw, cqh, cqmin, cqmax; initial, inherit, auto link
Outline-width Decorations integer px, %, em; medium, thin, thick, inherit, initial, revert, unset link
Outline-style Decorations select none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset link
Outline-color Decorations color Any color value link

Quiz

Q1: You want a section with a semi-transparent dark overlay on top of a background photo, with white text that stays fully visible. How do you achieve this?

  • A) Set Opacity to 0.5 on the section.
  • B) Use Background-color rgba(0, 0, 0, 0.5) and layer it over the background image.
  • C) Set the text Color to white and Opacity to 0.5.
Answer

B) Use Background-color rgba(0, 0, 0, 0.5) and layer it over the background image. -- Actually, you would use a linear gradient (from rgba(0,0,0,0.5) to rgba(0,0,0,0.5)) as a background image layer on top of the photo. Or use a separate overlay Div with an RGBA background. Using Opacity on the section would make the text semi-transparent too.

Q2: Your background image looks stretched and distorted in a wide section. What should you set?

  • A) Background-size: contain
  • B) Background-size: cover
  • C) Background-repeat: repeat
Answer

B) Background-size: cover -- It scales the image to fill the element while preserving its aspect ratio, cropping if necessary. contain would leave gaps, and repeat would tile the image.

Q3: You set a gradient background but also want a fallback color visible while the page loads. Where does the fallback go?

  • A) In a second gradient layer
  • B) In the Background-color property
  • C) In the Color property
Answer

B) In the Background-color property -- Background-color is always rendered behind all background image layers (including gradients). It shows through if the gradient has transparent areas or before the page fully renders.

Q4: You removed the outline from your buttons for aesthetic reasons. A user reports they cannot see which button is focused when using the keyboard. What should you do?

  • A) Add it back with a different color using the :focus pseudo-class.
  • B) Set Opacity to 0.8 on focus.
  • C) Nothing -- outlines are purely decorative.
Answer

A) Add it back with a different color using the :focus pseudo-class. -- Focus indicators are essential for keyboard accessibility. You can style them to match your design using Outline or Box-shadow on the :focus state. See Selectors and classes for how to target pseudo-classes.

Edit this page on GitLab