webdevpuneet.com

Related Snippets

57 in Mobile Screens category
41–46 of 57

Mobile Lock Screen

Story Progress Bars

Swipe to Delete List

Mobile Split Bill Screen

Mobile Referral & Invite Friends Screen

Mobile Settings Screen with Live Search

Mobile Lock Screen — Free CSS Phone Lock Screen Snippet

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

CategoryMobile Screens
TagsTouch GesturesSVGGlassmorphismCSS AnimationMobile UI

Copy & paste

Source Code

<div class="ls-phone">
  <div class="ls-screen" id="lsScreen">
    <div class="ls-status"><span id="lsBar">9:41</span><span class="ls-sr"><span class="ls-batt"><i></i></span></span></div>
    <div class="ls-clock">
      <span class="ls-lock"><svg viewBox="0 0 24 24" width="15" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg></span>
      <div class="ls-date" id="lsDate">Monday, June 29</div>
      <div class="ls-time" id="lsTime">9:41</div>
    </div>
    <div class="ls-notes" id="lsNotes">
      <div class="ls-note">
        <span class="ls-ic" style="background:#22c55e">M</span>
        <div class="ls-body"><div class="ls-row"><b>Messages</b><small>now</small></div><p>Sara: Are we still on for lunch? 🥗</p></div>
      </div>
      <div class="ls-note">
        <span class="ls-ic" style="background:#3b82f6">C</span>
        <div class="ls-body"><div class="ls-row"><b>Calendar</b><small>9:30</small></div><p>Standup with the design team in 30 min</p></div>
      </div>
      <div class="ls-note">
        <span class="ls-ic" style="background:#f59e0b">W</span>
        <div class="ls-body"><div class="ls-row"><b>Weather</b><small>8:00</small></div><p>Sunny today, high of 24°. Light breeze.</p></div>
      </div>
    </div>
    <div class="ls-foot">
      <span class="ls-torch"><svg viewBox="0 0 24 24" width="16" fill="currentColor"><path d="M9 2h6l-1 5h-4zM10 9h4l-1 6h-2zM11 17h2v5h-2z"/></svg></span>
      <div class="ls-swipe"><div class="ls-grip"></div><span>Swipe up to unlock</span></div>
      <span class="ls-cam"><svg viewBox="0 0 24 24" width="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 8h3l1.5-2h5L16 8h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/><circle cx="12" cy="13" r="3.2"/></svg></span>
    </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

Live clock and date
Updates from the system clock with custom formatting.
System-style type
Thin, tight clock to match a real lock screen.
Glass notifications
Frosted cards via backdrop-filter blur.
Staggered entrance
Cards cascade in with per-item delays.
Gradient wallpaper
Multi-stop gradient plus a radial highlight.
Swipe-up gesture
Threshold-based pointer detection to unlock.
Unlock animation
Screen slides up and fades on unlock.
No dependency
Pure HTML/CSS/JS inside a CSS phone frame.

About this UI Snippet

Mobile Lock Screen — Live Clock & Notification Stack

Screenshot of the Mobile Lock Screen snippet rendered live

A mobile lock screen is the first screen a phone shows — a big clock, the date, a stack of notifications, and a swipe-to-unlock hint. It's a great showcase for app concepts, push-notification designs, and onboarding flows. This snippet builds a polished one inside a CSS phone frame with a live clock and a real swipe-up gesture, in HTML, CSS, and vanilla JavaScript with no dependency.

Live clock and date

A tick() function formats the current time in 12-hour style and writes it to both the large clock and the status bar, and builds a friendly date ("Monday, June 29") from DAYS and MONTHS arrays rather than a locale string, so the format is fully in your control. An interval keeps it current. The large time uses a thin font-weight: 300 with negative letter-spacing to mimic the system lock-screen typography.

Glassmorphism notifications

Each notification is a frosted card — a semi-transparent white background plus backdrop-filter: blur(10px) — layered over the gradient wallpaper, which is the modern lock-screen look. They animate in with a staggered lsIn keyframe (increasing animation-delay per card) so the stack cascades on load, and the list scrolls independently with overflow-y:auto.

The wallpaper

The background is a multi-stop linear-gradient with a soft radial-gradient highlight layered via ::after for depth, giving a rich wallpaper without an image. All the foreground text and glyphs are white over it, with the notification glass providing contrast for readability.

A real swipe-up gesture

Unlocking works two ways: clicking the grip, or an actual swipe — pointerdown records the start Y, and pointerup checks whether the finger moved up more than 60px before triggering unlock(). The unlock animates the whole screen up and fades it, then resets, simulating the transition into the home screen. This is the same threshold-based swipe detection used for sheets and dismissible cards.

Reusing it

Swap the notifications for your own data, change the wallpaper gradient, and keep the frame as a wrapper. It pairs naturally with a phone mockup for presenting an app, or as the entry point before a mobile login screen.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA phone lock screen renders with a live clock and notifications.
  2. 2
    Watch the clockThe time and date update live from the system clock.
  3. 3
    See the notificationsGlassy cards cascade in over the gradient wallpaper.
  4. 4
    Swipe upDrag up from the screen to trigger the unlock animation.
  5. 5
    Or tap the gripClicking the swipe hint unlocks too.
  6. 6
    Customize itSwap notifications and the wallpaper gradient for your app.

Real-world uses

Common Use Cases

App concept demos
Present a concept on a realistic lock screen with a big thin clock and date, framed by a phone mockup.
Push notification design
Design alerts as frosted backdrop-filter cards in a stack, alongside a notification center for the full list.
Wallpaper and theme previews
Test how colours look behind glass cards using a colour theme switcher, with notifications cascading in on staggered delays.
Launch marketing screenshots
Frame an app launch announcement as a lock-screen notification, next to a product hero on the landing page.
Swipe-to-unlock reference
Learn how a threshold-based swipe gesture decides between unlocking and snapping back, then continue to a mobile login screen.
Related: Mobile Fitness Screen
See the Mobile Fitness Screen for a related mobile pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

A pointerdown handler records the starting Y coordinate, and pointerup checks whether the pointer moved upward by more than 60 pixels — if so it calls unlock(), which slides the screen up and fades it before resetting. Clicking the grip triggers the same function. It's the same threshold-based swipe detection used for bottom sheets and dismissible cards.

Yes. A tick() function reads the current Date, formats the time in 12-hour style, and updates both the large clock and the status bar, plus builds the date string from day and month name arrays. An interval keeps it current, so the lock screen never looks frozen on a placeholder time.

Each card has a semi-transparent white background combined with backdrop-filter: blur(10px), so the gradient wallpaper shows through softly — the glassmorphism look used on real lock screens. They animate in with a staggered keyframe, increasing the animation-delay per card so the stack cascades rather than appearing all at once.

Definitely. The wallpaper is a CSS gradient with a radial highlight, so change the colors or swap in a background image. The notifications are plain markup driven by an icon, title, time, and message, so replace them with your own data or render them from an array in a framework.

Keep the time in state updated by an interval in a mount effect with cleanup, and render notifications from an array. Implement unlock as a state flag that toggles the slide-and-fade classes. The swipe uses pointer events on a ref. In Tailwind, build the wallpaper with a gradient and the glass cards with bg-white/15 and backdrop-blur.