The familiar search box that types itself — dark or light, pill corners, magnifier and mic
A search-bar animation borrows the visual language everyone already trusts: a rounded box, a magnifier icon, a thin blinking cursor and text that appears one keystroke at a time. This page shows how to recreate that look exactly and turn it into a looping graphic you can put on a thumbnail, a video, a slide or a landing page.
Build your search-bar animation and export it as a GIF or WebM — all in the browser.
Open the Animated Search Bar →Three details sell the effect. First, the pill shape: fully rounded corners with a soft drop shadow on a light background, or a flat dark capsule for the dark theme. Second, the magnifier icon sitting on the left, with optional voice-search microphone on the right. Third, the caret — a thin vertical bar that blinks while the box waits and stays solid while typing. Get those three right and the brain reads it instantly as a search box.
The dark theme uses a charcoal capsule (#303134) with light grey text, matching the dark mode search box. The light theme uses a white capsule with a faint grey border and near-black text. Choose whichever contrasts best with your footage: dark bars sit cleanly over bright clips, light bars pop over dark or busy backgrounds. The caret colour defaults to a familiar blue, but you can recolour it to match your brand.
Real typing isn't instant. A speed of roughly 90–130 ms per letter reads as a confident human typing, while very fast speeds feel robotic and very slow ones lose attention. After the last letter, a pause of one to two seconds lets the viewer read the full query before the loop restarts. You can also switch to backspace mode, where the cursor deletes the text and retypes it, which is handy when you want the animation to feel continuous rather than snapping back to empty.
Beyond short-form video, the search-bar animation works as a hero graphic on a website, an email header, a tutorial intro, or a product demo where you want to imply "search for this." Export a transparent GIF for overlays, or an HD WebM when you need crisp text on a solid background. For a still image — a thumbnail or a slide — use the PNG export of the final frame.
Yes. Pick the dark theme for the dark look or the light theme for the classic white box, keep the pill corners and the magnifier icon, and use a blue caret to mirror the familiar style.
No. It is an independent generator that produces a search-bar-style graphic. It is not affiliated with or endorsed by Google.
Yes. Enable the microphone icon in the advanced options to place a mic on the right side of the bar, like the voice-search icon.