Styling & Design
Colors & backgrounds
What text color, background color, background images, and gradients are — and how to set each one with the color and background controls.
Last updated 2026-06-29
Color is the fastest way to set a mood and make a site feel like yours. This guide explains the two places color shows up — the color of things (mainly text) and the background behind things — starting from the very basics.
What is a color, in a website?
On the web, a color can be written a few ways. You don't need to memorize these — the color picker handles them — but it helps to recognize them:
- a hex code like
#2563eb(a#followed by six characters), - an RGB value like
rgb(37, 99, 235)(amounts of red, green, blue), - a brand color you've saved, shown as a swatch,
- transparent, meaning "no color — let what's behind show through."
Anywhere you can set a color, clicking the swatch opens a color picker where you can drag to choose a shade, type a hex code, or click one of your brand swatches.
Saving your palette in the Brand Kit means every color picker offers your brand colors first — so your whole site stays consistent and you can re-theme everything in one place.
Text color
The color of an element usually means the color of its text. You'll find it in the Typography controls. Pick a color that's easy to read against whatever is behind it (see contrast, below).
What is a background color?
Every element sits in a box. The background color is the fill that paints that whole box, behind its text and contents. A section with a light-grey background color, white cards on top, and dark text is a classic, clean look.
To set it, select an element, open the Background sector, and choose a Background color. Choosing transparent lets whatever is behind the element show through instead.
What is a background image?
A background image is a picture painted behind an element's content — for example, a photo behind a hero headline. The text sits on top of the image.
In the Background sector, use the Image & Gradient control to choose a picture (from a URL, your uploaded images, or an AI-generated image). Once an image is set, a few controls shape how it's painted:
| Control | What it does | Common choice |
|---|---|---|
| Size | How the image is scaled. Cover fills the whole box (cropping if needed); Contain fits the whole image inside (possibly leaving gaps). | Cover |
| Position | Which part of the image stays in view — top, center, bottom, etc. | Center |
| Repeat | Whether the image tiles to fill the space, or shows once. | No-repeat |
| Attachment | Whether the image scrolls with the page or stays fixed in place. | Scroll |
Readability first. Text on top of a photo can be hard to read. Use a darker image, add a semi-transparent overlay, or pick a text color that contrasts strongly. Webpress also nudges AI-generated sections toward readable combinations automatically.
What is a gradient?
A gradient is a smooth blend from one color to another — like a sky fading from blue to orange. They make great modern backgrounds.
The same Image & Gradient control lets you build a gradient instead of using an image:
- a linear gradient blends along a straight line (top-to-bottom, corner-to-corner),
- a radial gradient blends outward from a center point.
Add two or more colors, choose the direction, and you've got a background with depth — no image file required.
Contrast: making text readable
Contrast is the difference in lightness between text and its background. High contrast (dark text on a light background, or vice-versa) is easy to read; low contrast (light grey on white) strains the eyes and fails accessibility checks. The built-in Auditor flags text whose contrast is too low — a good habit is to keep an eye on its score.
Where to go next
- Brand kit & design tokens — set your palette once for the whole site.
- Images & media — upload or generate the images you use as backgrounds.
- Effects & shadows — opacity and overlays.