Shape Effects and Visual Styling

Apply 11 visual effects to shapes in infographic mode: drop shadow, inner shadow, outer glow, inner glow, Gaussian blur, motion blur, colour overlay, noise, outline, emboss, and colour adjustments. Combine effects with 16 blend modes for professional visual styling.

February 24, 2026

Shape effects add professional visual depth to infographic elements. Eleven toggleable effect types, six colour adjustment controls, and 16 blend modes give you fine-grained control over how shapes appear on the canvas and in exported output.

Shadow Effects

Two shadow types add depth and dimension to shapes.

Drop Shadow

External shadow cast behind the shape. Configure X and Y offset (-50 to 50px), blur radius (0-50px), shadow colour, and opacity (0-1). Default: 4px offset, 8px blur, black at 50% opacity.

Inner Shadow

Shadow rendered inside the shape boundary. Same controls as drop shadow: X and Y offset, blur radius, colour, and opacity. Creates an inset or recessed appearance. Default: 2px offset, 6px blur, black at 50% opacity.

Glow Effects

Glow effects create luminous halos around or inside shapes.

Outer Glow

Soft, luminous aura around the shape edge. Configure blur radius (0-50px), glow colour, and opacity. Use white or bright colours for a light-source effect, or brand colours for accent highlights. Default: 10px blur, white at 60% opacity.

Inner Glow

Inset glow rendered within the shape boundary. Same controls: blur radius, colour, and opacity. Useful for subtle illumination effects or glass-like appearances. Default: 8px blur, white at 50% opacity.

Blur Effects

Two blur types soften shapes or add directional motion.

Gaussian Blur

Uniform blur applied equally in all directions. Radius from 0 to 30px. Use for background elements, depth-of-field effects, or softening sharp edges. Default: 4px radius.

Motion Blur

Directional blur that simulates movement. Configure radius (0-30px) and angle (0-360 degrees). The blur stretches along the specified angle. Use for speed lines, directional emphasis, or dynamic visual effects. Default: 8px radius, 0 degrees.

Colour and Overlay Effects

Tint shapes or add textured surfaces.

Colour Overlay

Overlay a solid colour on the shape with configurable opacity (0-1) and blend mode (normal, multiply, screen, overlay). Use for tinting, darkening, or creating colour washes over existing shapes. Default: black at 30% opacity, normal blend.

Noise

Add organic texture using SVG turbulence. Choose between fractal and turbulence noise types with configurable intensity (0-100). Adds a natural, textured quality to flat shapes. Default: intensity 20, turbulence type.

Surface Effects

Modify the shape boundary and surface appearance.

Outline

Independent border rendered around the shape, separate from the shape's own stroke. Configure width (1-20px) and colour. Use for emphasis, selection indicators, or layered border effects that do not affect the shape's stroke settings. Default: 2px black.

Emboss

Three-dimensional bevelled appearance using directional lighting. Configure depth (1-10) and light angle (0-360 degrees). Creates a raised, stamped look similar to physical embossing. Default: depth 3, 135 degree angle.

Colour Adjustments

Six colour correction controls are always available when a shape is selected. Unlike the toggle effects above, colour adjustments do not have an enable/disable switch and apply whenever their values differ from the defaults.

Adjustment	Range	Default	Description
Brightness	-100 to 100	0	Darken or lighten the shape. Negative values move towards black, positive towards white
Contrast	-100 to 100	0	Increase or decrease the difference between light and dark areas
Saturation	0 to 200	100	Control colour intensity. 0 is fully greyscale, 100 is normal, 200 is hyper-saturated
Hue Rotation	0 to 360 degrees	0	Shift all colours around the colour wheel. 180 degrees inverts warm and cool tones
Sepia	0 to 100%	0	Apply a warm, aged tone. Higher values create a stronger vintage appearance
Invert	0 to 100%	0	Invert the shape colours. 100% fully inverts all colours

Blend Modes

Blend modes control how a shape composites with elements behind it. Sixteen standard CSS/SVG blend modes are available, applied to the entire shape including all active effects.

Group	Modes	Typical Use
Normal	normal	Default compositing, no blending
Darken	multiply, darken, colour-burn	Make overlapping areas darker. Multiply is the most commonly used for shadow-like blending
Lighten	screen, lighten, colour-dodge	Make overlapping areas lighter. Screen is useful for glow and light effects
Contrast	overlay, hard-light, soft-light	Combine darken and lighten based on the base colour. Overlay preserves highlights and shadows
Difference	difference, exclusion	Subtract colours for high-contrast artistic effects
Colour	hue, saturation, colour, luminosity	Transfer specific colour properties between layers

Applying Effects

Effect Properties Reference

Complete property reference for all 11 effect types.

Effect	Properties	Value Ranges
Drop Shadow	offsetX, offsetY, blur, color, opacity	Offset: -50 to 50px. Blur: 0-50px. Opacity: 0-1
Inner Shadow	offsetX, offsetY, blur, color, opacity	Offset: -50 to 50px. Blur: 0-50px. Opacity: 0-1
Outer Glow	blur, color, opacity	Blur: 0-50px. Opacity: 0-1
Inner Glow	blur, color, opacity	Blur: 0-50px. Opacity: 0-1
Gaussian Blur	radius	0-30px
Motion Blur	radius, angle	Radius: 0-30px. Angle: 0-360 degrees
Colour Overlay	color, opacity, blendMode	Opacity: 0-1. Blend: normal, multiply, screen, overlay
Noise	amount, type	Amount: 0-100. Type: fractal or turbulence
Outline	width, color	Width: 1-20px
Emboss	depth, angle	Depth: 1-10. Angle: 0-360 degrees