← Back to Examples

Image Styling Configuration Examples

Comprehensive examples demonstrating all styling options

Border Configuration

Basic Borders

Demonstrates border.width, border.color, border.radius, border.style

View Example

Asymmetric Borders

Per-side borders using borderTop, borderBottom, borderLeft, borderRight

View Example

Shadow Configuration

Shadow Presets & Custom

Presets: 'none', 'sm', 'md', 'lg', 'glow' plus custom CSS strings

View Example

Filter Configuration

Grayscale Reveal

Using filter.grayscale and filter.brightness for color reveal effect

View Example

Filter Effects

Demonstrates filter.contrast, filter.saturate, filter.sepia, filter.hueRotate

View Example

Blur & Opacity

Using filter.blur, filter.opacity for focus effects

View Example

Drop Shadow Filter

CSS filter dropShadow (object or string format)

View Example

Other Properties

Opacity & Cursor

Element opacity and custom cursor per state

View Example

Outline

Using outline.width, outline.color, outline.style, outline.offset

View Example

CSS Class Names

Inject custom className per state (string or array)

View Example

Combined Effects

Polaroid Effect

White frame borders, asymmetric bottom, warm filter tones

View Example

Vintage Photo

Sepia tones, reduced saturation, warm borders

View Example

Neon Glow

Cyberpunk aesthetic with bright glowing borders

View Example