Frosted glass

Let the background through. Keep type crisp.

Hover, focus or tap the card

Adjust effect

Start with a preset

FrostedClearWarm

Your settings are included in the prompt.

Surface

Tint

PaperCoolRose

Blur

Surface opacity

Saturation

Edge opacity

Corner radius

Shadow strength

Prompt language

Blur the backdrop by 18px with saturation at 1.15. Keep the content sharp.

Use this effect in your project

This prompt uses your current settings and asks the AI to keep your existing content and design.

Prompt · English

Create a Frosted glass effect using my project's existing stack.

Keep my content, typography, colors, and layout. Apply the effect to my existing card; do not recreate the Tomoyo demo artwork or add a component library.

Use a frosted glass surface with background rgba(247, 232, 216, 0.86), backdrop-filter blur(18px) saturate(1.15), 8px corner radius, a 1px inset rgba(255, 249, 239, 0.7) border and shadow 0 20px 32px rgba(4, 25, 72, 0.32). Place a contrasting image behind it; keep foreground content sharp. At low opacity, add a local paper-colored backing beneath text for legibility. The border must not change layout. Fall back to opaque #f7e8d8 without backdrop-filter support. Replay returns to paper over 160ms, then transitions to glass over 320ms using cubic-bezier(0.16, 1, 0.3, 1).

Keep the pointer hit area stationary and animate its inner visual surface. Continue from the current visual frame when switching effects; cancel superseded animations. Repeated Replay clicks during playback must not restart the animation or make it flash.

Respect prefers-reduced-motion: skip movement and fades, show all content immediately, and retain a clear focus indicator. A glass surface may remain static. Support keyboard and touch input. Keep the animation local to this component.

Implement the change, then tell me which parameters to adjust and how you verified the behavior.

Prompt · EN