Mobile Camera Screen — Free HTML CSS JS UI Snippet

A camera screen is almost all overlay — a viewfinder filling the frame, a row of quick toggles on top, a mode selector and shutter at the bottom, and a thumbnail of your last shot. This snippet builds a complete, interactive one inside a CSS phone frame: pressing the shutter fires a white flash and drops a new photo into the thumbnail, the grid and flash toggles work, and the flip button spins — in HTML, CSS, and vanilla JavaScript with no camera access required.

The viewfinder and focus frame

The viewfinder is a gradient stand-in for a live feed with a soft radial highlight suggesting a subject. Over it sits a focus frame with two accent corner brackets built from a single element's ::before and ::after — each is a small box with only two borders and one rounded corner, the universal "autofocus reticle" look. A rule-of-thirds grid overlay can be toggled on and off.

A shutter that fires a flash

Tapping the shutter plays a full-screen white flash via a @keyframes animation on an absolutely positioned overlay. To make it fire on every press — not just the first — the code removes the animation class, forces a reflow with void flash.offsetWidth, and re-adds it, the standard CSS-animation-restart trick. The shutter's inner disc also scales down on :active for a physical press feel.

Captured thumbnails that cycle

Each capture drops the next gradient from a small array into the thumbnail and replays a pop animation so the shot appears to fly into the corner, exactly how phone cameras animate a taken photo shrinking into the gallery button. The array cycles with a modulo so you can keep shooting.

Working toggles

The flash and grid buttons flip an amber "on" state; turning grid on reveals the thirds overlay. The mode selector — Video, Photo, Portrait, Square — moves an amber active label, and the flip-camera button rotates a full turn on tap to signal switching between front and rear cameras. Each is a small, self-contained interaction that mirrors a real camera app.

Accessibility and performance

Every control — the top toggles, the mode buttons, the shutter, and flip — is a real <button> with an aria-label, so the camera UI is fully keyboard-operable and screen readers announce each action rather than a bare glyph. When you adapt it, reflect toggle state with aria-pressed on the flash and grid buttons and mark the active mode with aria-pressed too, so their on state is announced and not carried by color alone. One accessibility consideration for the flash: the full-screen white pulse can be jarring, so gate it behind a prefers-reduced-motion check for users who opt out of motion. Performance is deliberately cheap: the flash and thumbnail pop are single CSS keyframes restarted with a forced reflow rather than by creating nodes, the viewfinder and focus reticle are pure CSS with no repaint cost while idle, and the grid overlay is one gradient toggled with the hidden attribute. Wiring a real camera adds a <video> element and a canvas capture, but the overlay chrome stays exactly as lightweight as it is here.

Reusing it

Replace the gradient viewfinder with a <video> element bound to getUserMedia, capture real frames to a canvas on shutter, and wire the modes to your capture settings. Lift the overlay out of the phone frame for a responsive web camera, or keep it framed beside a camera UI control panel to present a full capture flow.