Glassmorphism Sign In

signin

Futuristic translucent frosted-glass login card with spatial background blur.

#signin#glass#blur#modern

Live Interactive Preview

Secure Pass

Component Source Code

Select language in the dropdown

GlassLogin.tsx

1'use client';
2
3import React from 'react';
4import { Mail, Lock, ShieldCheck } from 'lucide-react';
5
6export default function GlassLogin() {
7  return (
8    <div className="relative w-full max-w-md overflow-hidden rounded-3xl border border-slate-200/80 dark:border-white/10 bg-white/70 dark:bg-black/40 p-6 sm:p-8 backdrop-blur-2xl shadow-xl transition-colors">
9      <div className="absolute -top-10 -right-10 h-32 w-32 rounded-full bg-blue-500/20 blur-2xl pointer-events-none" />
10      
11      <div className="flex items-center gap-2 mb-6">
12        <ShieldCheck className="h-6 w-6 text-blue-600 dark:text-blue-400" />
13        <span className="font-bold text-lg text-slate-900 dark:text-slate-100">Secure Pass</span>
14      </div>
15
16      <form onSubmit={(e) => e.preventDefault()} className="space-y-4">
17        <div>
18          <label className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Email</label>
19          <div className="relative">
20            <Mail className="absolute left-3 top-2.5 h-4 w-4 text-slate-400" />
21            <input
22              type="email"
23              placeholder="user@glass.io"
24              className="w-full rounded-xl border border-slate-200 dark:border-white/10 bg-white/80 dark:bg-white/5 py-2 pl-9 pr-3 text-sm text-slate-900 dark:text-slate-100 outline-none backdrop-blur-md transition focus:border-blue-500"
25            />
26          </div>
27        </div>
28
29        <div>
30          <label className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Password</label>
31          <div className="relative">
32            <Lock className="absolute left-3 top-2.5 h-4 w-4 text-slate-400" />
33            <input
34              type="password"
35              placeholder="••••••••"
36              className="w-full rounded-xl border border-slate-200 dark:border-white/10 bg-white/80 dark:bg-white/5 py-2 pl-9 pr-3 text-sm text-slate-900 dark:text-slate-100 outline-none backdrop-blur-md transition focus:border-blue-500"
37            />
38          </div>
39        </div>
40
41        <button className="w-full rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 py-2.5 text-sm font-semibold text-white shadow-md hover:from-blue-700 hover:to-indigo-700 active:scale-98 transition">
42          Sign In Glass
43        </button>
44      </form>
45    </div>
46  );
47}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/signin/GlassLogin.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import GlassmorphismSignIn from '@/components/signin/GlassLogin';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <GlassmorphismSignIn />
7    </main>
8  );
9}