Color Box

Create a colored surface behind content.

How to use

Size the box to the highlight area.
Set fill, border, corners and shadow, then send it behind text.

Things to check

Text above it is a separate block; group them to move together.

Property reference

Select the module in the editor to change its settings. Technical identifiers below are kept unchanged for reference; some advanced fields are stored as structured data rather than separate controls.

Find a property

25 / 25

backdropBlur

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

backdropFilter

Filter applied to the surface behind the block; depends on browser support.

string

backgroundColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

blendMode

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

'normal' | 'multiply' | 'screen' | 'overlay' | 'soft-light' | 'hard-light' | 'color-dodge' | 'color-burn' | 'darken' | 'lighten' | 'difference' | 'exclusion'

borderColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

borderEnabled

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean

borderRadius

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

borderStyle

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset'

borderWidth

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

fillContainer

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean

gradientAnimation

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

boolean

gradientAnimationSpeed

Controls movement speed, duration or delay. Units are shown in the editor control; test timing in presentation mode.

number

gradientAnimationType

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

'horizontal' | 'vertical' | 'diagonal' | 'radial' | 'pulse' | 'random'

gradientDirection

Sets the associated element alignment, placement or direction; preview it within the content area.

string

gradientEnabled

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean

gradientEndColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

gradientStartColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

opacity

Visibility ratio: 0 is fully transparent and 1 is fully opaque.

number

shadowBlur

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

shadowColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

shadowEnabled

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean

shadowOffsetX

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

shadowOffsetY

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

shadowSpread

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

shadowType

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

'custom' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'inner' | 'outline' | 'glow' | 'neon'