Webpress

Styling & Design

Effects & shadows

Add depth and polish with shadows, transparency, blur and other filters, smooth transitions, and transforms.

Last updated 2026-06-29

Effects are the finishing touches that make a design feel polished: a soft shadow that lifts a card off the page, a gentle fade on hover, a subtly blurred background. Most of these live in the Effects sector of the Customize tab (Simple mode offers the common ones too).

Shadows

A shadow adds depth by suggesting an element floats above the page.

  • Drop shadow (box shadow) — a soft shadow behind a whole element, like a card or button. In Simple mode it's the Drop Shadow control; a subtle, slightly-blurred shadow reads as "lifted," while a hard, dark one feels heavy.
  • Text shadow — a shadow behind text, found in the Typography controls. Used sparingly, it can keep a headline readable over a busy photo.

Less is more. A single soft shadow on cards and buttons looks modern; shadows on everything looks cluttered. Keep them light and consistent.

Opacity (transparency)

Opacity is how see-through an element is, from fully solid (100%) to fully invisible (0%). A slightly reduced opacity is useful for overlays, watermarks, or dimming an image so text on top stays readable. Drag the opacity slider to set it.

Filters

Filters change how an element (often an image) is rendered, without editing the original file. Each is a slider:

FilterEffect
BlurSoftens/blurs the element — great for frosted-glass backgrounds.
BrightnessMakes it lighter or darker.
ContrastIncreases or flattens the difference between lights and darks.
SaturateBoosts or mutes the colors (0% = greyscale-ish, high = vivid).
GrayscaleDrains color toward black-and-white.

A common trick: drop the brightness of a hero background image so white text on top is easy to read.

Transitions — smooth changes

A transition makes a style change happen gradually instead of instantly. They pair perfectly with states: add a transition so a button's color fades smoothly when hovered rather than snapping.

You set a duration (how long the change takes, e.g. 0.2s) and optionally which property animates. Short durations (150–300ms) feel responsive; long ones feel sluggish.

Transforms — move, rotate, scale

A transform repositions an element visually without disturbing the layout around it:

  • Translate — nudge it horizontally or vertically.
  • Rotate — tilt it by an angle.
  • Scale — grow or shrink it.
  • Skew — slant it.

A favorite combination: a small scale-up on hover (via a state) plus a transition, so a card gently grows when pointed at.

Where to go next