LiveScroll the notes, then switch the blur off to compare
The prompt
Create a "What's new" panel for a fictional budgeting app, Tally, on a pale page (#eef0f6). The panel is up to 390 by 600px, #fbfbfd, 30px radius, holding a scrolling feed: version headers and white cards with a 118px banner of CSS shapes on bright gradients, a title and one sentence. Cards include Shared pots (#ffb36b to #ff6f91, three linked rings), Receipt snap (#4f7bff to #9b6bff, a tilted receipt), Calmer notifications (#1fc8a0, a "7 pm" tile), Dark mode and Round-ups into savings. A header with a small indigo (#5b6cff) "Tally" label, "What's new" and a "Blur edges" switch floats over the top, and a dark "Update to 4.2" button floats over the bottom. Add a progressive blur under both: a 118px top band and a 132px bottom band, each made of six stacked layers whose backdrop-filter blur doubles from 0.5px to 16px, every layer masked by a linear gradient to a band that moves closer to the edge, plus a light wash of the panel colour. The switch fades the edges off to compare. When idle, the feed glides down at about 27px a second, pauses, eases back to the top, and stops for 5s after any wheel, touch or key. Reduced motion turns the glide off.
Written by Informeek Studio to recreate this design. Prompts are not deterministic: running it again gives a similar result, not an identical one.
Use it in three steps
Copy the prompt with the button above.
Paste it into your tool, such as v0, Lovable, Bolt or Claude.
Make it yours by filling the feed with your own release notes or messages.
About this progressive blur
A progressive blur gets stronger towards an edge instead of switching on all at once, the way a phone blurs the content under its status bar. Here the colourful release note cards slide under a floating header and a floating update button, and they soften gradually as they go, from crisp to a gentle haze to a full blur right at the edge. The text on top stays readable and nothing is hidden behind a hard band.
CSS cannot vary blur across one element, so the edge is six thin layers stacked together. Each layer blurs twice as much as the one before, and each is masked to a narrower strip nearer the edge, so the blur builds up in smooth steps. A switch in the header turns the edges off, which is the quickest way to see what they add.
Why the prompt works
It explains the layer stack, six backdrop filters with doubling blur and moving masks.
It gives the band heights for the top and bottom edges in pixels.
It fills the feed with bright, specific content, because blur only shows on colour.
It includes a comparison switch and an idle glide for visitors who do not scroll.
Where to use it
App panels, chat threads, feeds and any scroll area with floating controls. Keep the blurred bands short so most of the content stays sharp.
The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.
We use cookies to measure how the site is used and, if you allow it, to show advertising. Prompts you copy and previews you try are never collected. See our privacy policy.
