webdevpuneet.com

Related Snippets

57 in Mobile Screens category
26–31 of 57

Mobile Banking Screen

Mobile Checkout Screen

Mobile Feed Screen

Mobile Settings Screen

Mobile Chat Screen

Dialer Keypad

Mobile Banking Screen — Free HTML CSS JS Snippet

Mobile Banking Screen · Mobile · Plain HTML, CSS & JS · Live preview

CategoryMobile Screens
TagsMobile UI

Copy & paste

Source Code

<div class="mbk-phone">
  <div class="mbk-screen">
    <div class="mbk-status"><span>9:41</span><span class="mbk-batt"><i></i></span></div>
    <header class="mbk-head">
      <div class="mbk-hi"><small>Good morning</small><b>Alex Morgan</b></div>
      <div class="mbk-ava">AM</div>
    </header>
    <div class="mbk-scroll">
      <div class="mbk-card">
        <div class="mbk-crow"><span class="mbk-clabel">Total balance</span><button class="mbk-eye" id="mbkEye" aria-label="Toggle balance">&#128065;</button></div>
        <div class="mbk-bal" id="mbkBal">$12,480.55</div>
        <div class="mbk-cchip">
          <span class="mbk-cnum">•••• 8821</span>
          <span class="mbk-cbrand">VISA</span>
        </div>
      </div>

      <div class="mbk-actions">
        <button class="mbk-act"><span class="mbk-aic a1">&#8593;</span><small>Send</small></button>
        <button class="mbk-act"><span class="mbk-aic a2">&#8595;</span><small>Request</small></button>
        <button class="mbk-act"><span class="mbk-aic a3">&#8646;</span><small>Transfer</small></button>
        <button class="mbk-act"><span class="mbk-aic a4">+</span><small>Top up</small></button>
      </div>

      <div class="mbk-tx">
        <div class="mbk-txhd"><b>Transactions</b><button class="mbk-see">See all</button></div>
        <div class="mbk-item"><span class="mbk-tic t1">🛒</span><div class="mbk-tmeta"><b>Whole Foods</b><small>Groceries · Today</small></div><span class="mbk-amt out">-$54.20</span></div>
        <div class="mbk-item"><span class="mbk-tic t2">💼</span><div class="mbk-tmeta"><b>Salary — Acme Co</b><small>Income · Yesterday</small></div><span class="mbk-amt in">+$3,200.00</span></div>
        <div class="mbk-item"><span class="mbk-tic t3">🎬</span><div class="mbk-tmeta"><b>Netflix</b><small>Subscription · Mar 2</small></div><span class="mbk-amt out">-$15.99</span></div>
        <div class="mbk-item"><span class="mbk-tic t4">☕</span><div class="mbk-tmeta"><b>Blue Bottle</b><small>Coffee · Mar 1</small></div><span class="mbk-amt out">-$6.75</span></div>
        <div class="mbk-item"><span class="mbk-tic t5">💸</span><div class="mbk-tmeta"><b>From Jordan L.</b><small>Transfer · Mar 1</small></div><span class="mbk-amt in">+$40.00</span></div>
      </div>
    </div>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Card-style balance
Gradient card with a CSS decorative circle.
Hide-balance toggle
Blurs every amount at once, not just the balance.
Tinted redaction
Income and spending keep color hints when hidden.
Quick-action grid
Four accent tiles with a pulse on tap.
Web Animations pulse
element.animate for feedback without state change.
Signed transactions
Green income, dark spending, dated subtitles.
Tap feedback
Rows flash when selected.
No dependency
Pure HTML, CSS, and vanilla JavaScript.

About this UI Snippet

Mobile Banking Screen — Account Dashboard UI

Screenshot of the Mobile Banking Screen snippet rendered live

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.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA banking home screen renders with a gradient balance card, action grid, and transactions.
  2. 2
    Hide the balanceTap the eye icon and the balance plus every transaction amount blur into an unreadable smudge.
  3. 3
    Reveal it againTap once more and every figure snaps back; the eye glyph changes to reflect the state.
  4. 4
    Tap a quick actionSend, Request, Transfer, or Top up pulse with a scale animation on tap.
  5. 5
    Tap a transactionRows flash to acknowledge the tap.
  6. 6
    Bind your dataFeed the balance and transactions from your API and persist the privacy toggle.

Real-world uses

Common Use Cases

Banking app home screens
Make the balance the hero on a gradient card, placed beside a wallet card to show the cards a customer holds.
Budgeting dashboards
Pair with a budget tracker card so spending against category limits sits just under the balance.
Transaction history lists
Reuse the ledger like a transaction list, where income and spending keep colour hints even when amounts are hidden.
Privacy and redaction patterns
Blur every amount at once with the hide-balance toggle, a mobile take on masking figures that a stats card could also use.
Quick action grids
Offer four accent tiles for send, request, pay and top up, each pulsing on tap so the press feels acknowledged.
Related: Live Caption Overlay
See the Live Caption Overlay for a related mobile pattern worth pairing with this one.
Related: Voice Message Bubble
See the Voice Message Bubble for a related mobile pattern worth pairing with this one.
Related: Mobile Edit Profile Screen
See the Mobile Edit Profile Screen for a related mobile pattern worth pairing with this one.
Related: Mobile Voice Message Recording Screen
See the Mobile Voice Message Recording Screen for a related mobile pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Tapping the eye flips a hidden class on both the balance element and every element with the mbk-amt class in the transaction list. The class sets color to transparent and adds a soft text-shadow, turning the digits into a smudge. Because it targets a shared class, one tap redacts the whole screen and one more reveals it.

Replacing text with dots discards the real value, so you would need to re-render on reveal. The transparent-color-plus-blur approach keeps the true digits in the DOM and only changes how they render, which makes the reveal instant and avoids storing the value separately. Income and spending rows use tinted blur shadows so the row type is still hinted.

It uses a gradient background with a large faded circle created by an ::after pseudo-element that bleeds off the corner, plus a masked card number and a VISA brand mark. The content sits above the circle via position relative and z-index, giving the layered look of an actual payment card.

Each action button calls the Web Animations API — element.animate() with a short scale keyframe sequence — on tap. This gives tactile feedback without permanently changing any state, which suits buttons that would navigate to another flow in a real app rather than toggling something on the screen.

Render the transactions from an array and the balance from state. Track the hidden flag in state and bind the hidden class to it rather than toggling classList. Replace element.animate with a CSS transition keyed off a state flag if you prefer. Feed all figures from your API and persist the privacy preference. The CSS and Tailwind utilities port directly.