Mobile Banking Screen — Free HTML CSS JS Snippet

A banking home screen has to make one number the hero — the balance — then surround it with quick actions and a readable transaction history. This snippet builds a complete, interactive one inside a CSS phone frame: a gradient balance card styled like a physical card, a privacy toggle that hides every monetary amount at once, an action grid with tap feedback, and a color-coded transaction list — in HTML, CSS, and vanilla JavaScript with no dependency.

The balance card as a physical card

The balance sits on a gradient card with a large faded circle bleeding off the corner (a pure-CSS ::after pseudo-element) and a masked card number with a VISA brand mark, so it reads as an actual payment card rather than a plain panel. The layering uses position: relative with z-index so the content stays above the decorative circle.

A privacy toggle that hides real money

Tapping the eye button flips a hidden class on the balance and every .mbk-amt in the transaction list. Rather than replacing the text with dots — which would lose the value — the class sets the color to transparent and adds a soft text-shadow blur, so the digits become an unreadable smudge you can instantly reveal again. The incoming (green) and outgoing amounts get tinted blur shadows so the redaction still hints at the row's type. The eye glyph itself swaps to a "see-no-evil" icon while hidden.

The quick-action grid

Four actions — Send, Request, Transfer, Top up — are laid out as equal flex columns with rounded icon tiles in distinct accent colors. Tapping one runs a quick scale pulse via the Web Animations API (element.animate()), giving tactile feedback without permanently changing state, which is right for buttons that would navigate away in a real app.

The transaction list

Each row pairs a colored category icon with a merchant, a category-and-date subtitle, and a signed amount — green with a plus for income, dark for spending. Rows share hairline separators and flash on tap. This is the scannable ledger pattern every banking and wallet app uses.

Accessibility and performance

The privacy toggle, quick actions, and each transaction row are real buttons with aria-labels, so the whole screen can be operated from the keyboard and screen readers announce every control. One accessibility caveat worth handling when you adapt this: the hidden balance only blurs visually, so for assistive tech you should also swap the accessible text — for example set an aria-label like "balance hidden" on the balance element while it is redacted — so a screen reader does not still read the exact figure aloud. Performance is minimal: hiding amounts toggles a single class on a shared selector rather than rewriting any numbers, the pulse uses the Web Animations API which runs off the main layout, and the transaction list is static markup with no scroll listeners. Because the redaction keeps the real digits in the DOM and only changes how they paint, revealing is instant with no re-fetch or re-render. When you wire real data, format currency once and store the raw value separately so the visible and accessible representations can diverge cleanly.

Reusing it

Feed the balance and transactions from your API, wire the action buttons to their flows, and persist the hide-balance preference. Lift the content out of the phone frame for a responsive web dashboard, or keep it framed beside a wallet card to present a full finance app.