Effects

The Effects panel brings together a variety of effect styles, including shadows, transforms, filters, opacity, blend modes, and transitions. Many of these effects support multiple style properties — for example, multiple box shadows or combined translation and scaling transforms. To manage this, the Effects panel uses a repeater control.

Working with Effects

Adding an Effect

Adding effects starts by click the add effects button

Adding Effects

Adding an effect opens the Effects Editor panel. Each editor panel is tailored to the specific effect style property You can find more information about each panel under its corresponding effect.

The panel header – close, delete and options

At the top of each effects panel are options to:

• Close the panel
• Delete the style property
• open more Options

See. below form information on the Options available to the effects panel.

Adding Multiple Effects

You can add more style properties to the effect. Each one will be added beneath the last.

Re-ordering multiple effect properties

The order in which effects set the order in which the CSS is printed and this may effect the overall effect. You can adjust the order using the:

Drag Handle

Editing and duplicating an effect

By hovering over or focusing on any effect in the list, you will be provide options to:

• Duplicate Style
• Edit Style

More options

open more Options

From this panel you can learn more about the CSS property and delete all the styles for this one effect. And you can also use the Add via Paste option.

Add via Paste

Since effects can include multiple style properties — and with so many great code examples available online for creative box shadows and other effects — we’ve added a handy shortcut that lets you paste styles directly into the editor.

The CSS must only include the style property declarations, for example see below the CSS for a multi layer Box Shadow

box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, 
rgba(0, 0, 0, 0.12) 0px -12px 30px, 
rgba(0, 0, 0, 0.12) 0px 4px 6px, 
rgba(0, 0, 0, 0.17) 0px 12px 13px, 
rgba(0, 0, 0, 0.09) 0px -3px 5px;

Box Shadow

box-shadow

The box-shadow property adds shadow effects to elements, enhancing depth and contrast.

• offset-x / offset-y – Controls shadow position.
• blur-radius – Softens edges; higher values create a smoother shadow.
• spread-radius – Expands or shrinks the shadow.
• color – Defines the shadow color.

Transition

transition

A shorthand to define how style changes happen smoothly over time, including what changes, how long it takes, the speed curve, and any delay.

• transition-duration – How long it takes.
• transition-timing-function – The speed curve (e.g., ease-in).
• transition-property – What property changes (e.g., opacity) defaults to all
• transition-delay – When it starts.

Filter

filter

Applies visual effects directly to the element itself — not the background behind it.

Values

• blur() – Blurs the element.
• brightness() – Adjusts element brightness.
• contrast() – Adjusts element contrast.
• grayscale() – Converts element to grayscale.
• hue-rotate() – Shifts element colors.
• invert() – Inverts element colors.
• opacity() – Adjusts element transparency.
• saturate() – Increases or decreases color intensity.
• sepia() – Adds a warm, aged tint.

The property can accept multiple values eg. blur(10px) brightness(0.8)

Text Shadow

text-shadow

The text-shadow property adds shadow effects to text, creating a sense of depth or emphasis.

• offset-x / offset-y – Controls shadow position.
• blur-radius – Softens edges; higher values create a smoother shadow.
• color – Defines the shadow color.

Transform

transform

The transform lets you visually manipulate an element — moving, scaling, rotating, or skewing it — all in a single property.

• perspective – Defines the 3D view depth
• scale – Resizes an element in 2D
• scale3d – Resizes an element in 3D
• rotate – Rotates an element in 2D
• rotate3d – Rotates an element in 3D
• skew – Slants an element in 2D
• translate – Moves an element in 2D or 3D

Transform Origin

transform-origin

The transform-origin property in CSS defines the point from which a transform (such as rotation, scaling, etc.) will occur.

Example values for 2d transforms

• transform-origin: center; (default) — Transformation happens from the center of the element.
• transform-origin: left top; — Transformation happens from the top-left corner.
• transform-origin: 50% 50%; — Same as center, but using percentage values.
• transform-origin: 0 0; — Transformation happens from the top-left corner (same as left top).
• transform-origin: 100% 0; — Transformation happens from the top-right corner.

Opacity

opacity

opacity controls how transparent a block and any inner blocks is.

Value

Accepts a decimal number ranging from 0 ( fully transparent / invisible ) to 1 ( fully visible )

Accepts a percentage value ranging from 0% ( fully transparent / invisible ) to 100% ( fully visible )

Visibility

visibility

visibility controls whether an element is visible or hidden, but the element still takes up space on the page.

Values

• visible – The element is shown (default).
• hidden – The element is hidden, but its space remains.

Mix Blend Mode

mix-blend-mode

Controls how an element’s content blends with the content behind it (the background or other blocks).

• normal – No blending (default).
• multiply – Darkens by multiplying colors with the background.
• screen – Lightens by blending inverse colors.
• overlay – Combines multiply and screen for high contrast.
• darken – Keeps only the darkest colors.
• lighten – Keeps only the lightest colors.
• color-dodge – Brightens the background based on element color.
• color-burn – Darkens the background based on element color.
• hard-light – Like overlay, but based on the element, not background.
• soft-light – Similar to hard-light, but softer.
• difference – Subtracts colors to highlight differences.
• exclusion – Similar to difference but lower contrast.
• hue – Applies element hue to background colors.
• saturation – Applies element saturation to background.
• color – Applies element hue & saturation, keeps background brightness.
• luminosity – Applies element brightness, keeps background hue & saturation.

Photo by Dan Gold on Unsplash

Backdrop Filter

backdrop-filter
Applies visual effects (like blurs, brightness, etc.) to the background behind an element — not the element itself. Think of it like putting frosted glass or tinted film over the background.

Values

• normal – No blending (default).
• multiply – Darkens by multiplying colors with the background.
• screen – Lightens by blending inverse colors.
• overlay – Combines multiply and screen for high contrast.
• darken – Keeps only the darkest colors.
• lighten – Keeps only the lightest colors.
• color-dodge – Brightens the background based on element color.
• color-burn – Darkens the background based on element color.
• hard-light – Like overlay, but based on the element, not background.
• soft-light – Similar to hard-light, but softer.
• difference – Subtracts colors to highlight differences.
• exclusion – Similar to difference but lower contrast.
• hue – Applies element hue to background colors.
• saturation – Applies element saturation to background.
• color – Applies element hue & saturation, keeps background brightness.
• luminosity – Applies element brightness, keeps background hue & saturation.

The property can accept multiple values eg. blur(10px) brightness(0.8)