Gradient Glow Block

Gradient Glow adds soft decorative depth behind a composition without carrying text or interaction.

Place Gradient Glow inside a Section to create a more dynamic background behind a hero, callout, or featured content area. Keep the glow behind the content layer, soften it with Blur and Soft Edge, and verify text contrast at every breakpoint.

Properties

Properties controls the palette, gradient model, glow softness, compositing, and shape. Choose the visual role and effective background before tuning individual values.

Palette and Gradient Style

Palette provides theme-aware and named color sets such as Finsaro Lime, Theme Primary, Aurora, Ember, Bloom, Lagoon, Prism, Sunset, Frost, Noir Glow, and Volt. Gradient Style changes the color field between Mesh, Linear, and Radial.

Custom colors and angle

When Palette is Custom, Color 1, Color 2, Color 3, and Angle define the gradient directly. Theme tokens keep the effect aligned with site design; custom colors are useful for a one-off art direction but require contrast checks against every surface behind or above the glow.

Blur, Opacity, Soft Edge, and Spread

Blur diffuses the aura, Opacity controls its strength, Soft Edge controls the fade near its boundary, and Spread expands the effect beyond the base shape. Tune these together: high spread and blur can wash out nearby content even when opacity appears moderate.

Blend

Blend selects Normal, Screen, Plus Lighter, Soft Light, Overlay, or Multiply compositing. The result depends on the effective surface beneath the block, so always judge it in the real section rather than on a neutral editor canvas.

Shape, Stretch, and Rotation

Shape chooses the aura silhouette. Stretch expands it to fill the authored grid area, while Rotation turns the selected shape. A custom shape path is stored only when a custom silhouette is supplied by the editor.

Layout

Gradient Glow is frame-driven and starts from a 6-column by 5-row grid frame. Choose width and height from the intended aura footprint, layer it deliberately behind or beside content, and keep the section exactly one free row taller than the lowest block.

Behavior

The block is decorative and has no visitor controls. It renders a blurred composited gradient inside its frame; Stretch, rotation, spread, and blend mode change the visible footprint and can extend perceived color beyond the shape.

Style Panel

Gradient Glow has no Style tab or Style Panel. Its palette, gradient style, colors, angle, blur, opacity, soft edge, spread, blend mode, shape, stretch, and rotation are controlled through Properties, so no Style screenshot applies.

Gradient Glow usually needs a transparent block surface and no extra border. If the effect sits beneath text or controls, verify the least favorable color region and add a separate protective surface behind the foreground content when necessary.

Motion

Gradient Glow supports standard entrance effects. A restrained fade can reveal depth without distracting from content; avoid repeated zoom, pop, or floating motion behind reading and interaction, and respect reduced-motion preferences.

Property summary

Palette and Gradient Style — named color system and mesh, linear, or radial construction.

Custom colors and Angle — direct gradient stops available with the Custom palette.

Blur, Opacity, Soft Edge, and Spread — aura intensity and footprint.

Blend — compositing against the effective background.

Shape, Stretch, and Rotation — silhouette and frame coverage.

Responsive behavior

Gradient Glow is frame-driven, so the height audit intentionally leaves it for manual composition review. A large desktop aura may need a smaller frame, different rotation, or tighter spread on tablet and mobile.

Check the complete color footprint at every breakpoint, not only the grid outline. Make sure the glow does not create horizontal overflow, obscure text, or leave an accidental empty band after the section stacks.

Accessibility

• Treat the glow as decorative; essential meaning must remain in text, structure, and controls.

• Recheck text, link, focus, and control contrast over the brightest and darkest parts of the aura.

• Avoid continuous decorative motion and respect reduced-motion preferences.

• Do not use glow color alone to indicate state, category, or urgency.

Best practices

• Give the glow one compositional role: focus, depth, separation, or atmosphere.

• Prefer a theme palette when the treatment repeats across the site.

• Place the glow behind content and keep foreground surfaces independently readable.

• Tune frame, spread, and rotation for each breakpoint when the footprint changes.

Common mistakes

• Combining maximum opacity, blur, spread, and a bright blend mode.

• Checking contrast against the section token instead of the rendered gradient.

• Shrinking a frame-driven glow automatically from its DOM height or leaving an oversized frame with no visual purpose.

• Letting rotated or spread color create unintended horizontal overflow on mobile.

Quick recipe

Add Gradient Glow to a dedicated section, choose a theme or named palette, select Mesh, Linear, or Radial, tune blur, opacity, soft edge, and spread against the real background, set the blend and shape, layer it intentionally, then inspect the complete footprint at desktop, tablet, and mobile widths.