Box shadow and CSS filters
Box shadows add depth and elevation to elements. CSS filters let you blur, recolor, and manipulate how elements appear — all in the browser, without editing image files. Both properties are live and editable directly in the Style pane.
Box shadow
A box shadow takes up to five values: horizontal offset, vertical offset, blur radius, spread radius, and color.
box-shadow: 4px 8px 24px 0px rgba(0, 0, 0, 0.12);
| Value | What it controls |
|---|---|
| Horizontal offset | Shadow shifts right (positive) or left (negative) |
| Vertical offset | Shadow shifts down (positive) or up (negative) |
| Blur radius | Higher value = softer, more diffuse shadow |
| Spread radius | Expands (+) or contracts (-) the shadow uniformly |
| Color | Any CSS color — use RGBA for transparency |
A shadow at 0 0 0 0 with an RGBA color is invisible. The most natural-looking shadows use a vertical offset (light comes from above), moderate blur, and a low-opacity dark color.
Multiple shadows
You can layer multiple shadows on a single element. In Site Designer, click the + button in the shadow section to add another shadow. Multiple shadows are listed in order — the first is on top.
A common technique for a more realistic, layered depth effect is to combine a large, soft ambient shadow with a small, sharp proximity shadow:
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 8px 24px rgba(0, 0, 0, 0.12);
Inset shadows
Check the inset option in Site Designer to switch a shadow from outside the element to inside. Inset shadows sit between the background and the content, creating a pressed-in or recessed effect. They are commonly used on form inputs to suggest depth.
drop-shadow filter vs. box-shadow
filter: drop-shadow() is a CSS filter that works like box-shadow but follows the visible shape of the element, including transparency. For a PNG image with a transparent background or an SVG icon, drop-shadow traces the actual outline of the graphic rather than its rectangular bounding box.
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
Use box-shadow for rectangular UI elements (cards, buttons, panels). Use filter: drop-shadow() for images and icons with irregular shapes.
CSS filters
CSS filters apply visual effects to an element and everything inside it. Site Designer exposes the following in the Style pane:
| Filter | What it does |
|---|---|
blur(px) | Gaussian blur — for frosted glass backgrounds |
brightness(%) | Lightens (>100%) or darkens (<100%) |
contrast(%) | Increases or decreases contrast |
grayscale(%) | Desaturates toward black-and-white |
hue-rotate(deg) | Shifts all hue values by a given angle |
invert(%) | Inverts colors — 100% = full inversion |
saturate(%) | Boosts or reduces color saturation |
sepia(%) | Applies a warm brownish tint |
Filters can be combined. Multiple filters are applied in sequence:
filter: brightness(110%) saturate(130%);
Filter on hover
A popular interaction pattern is to display images in grayscale by default, then reveal full color on hover:
/* Default state */
.project-image { filter: grayscale(100%); }
/* Hover state */
.project-image:hover { filter: grayscale(0%); }
/* Transition — defined on the default state */
.project-image { transition: filter 400ms ease; }
This creates a dramatic reveal effect that draws attention to the hovered item without any image duplication.
