Animated Glass Pricing Card Using HTML & CSS | Modern UI in 1 Minute

Описание: Build a Glassmorphism Pricing Card in under 1 minute using pure HTML and CSS!
This modern UI effect is perfect for landing pages, SaaS websites, portfolios, and frontend projects.

You’ll learn:
✔ Glass blur effect (backdrop-filter)
✔ Neon gradient text
✔ Soft glowing button
✔ Pop animation
✔ Clean and professional UI design

Subscribe for daily 1-minute web development tutorials!
https://www.amittutorial.com

⭐ HTML (safe)
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
meta name="viewport" content="width=device-width, initial-scale=1.0"
title Glass Pricing Card - Amit Tutorial /title
link rel="stylesheet" href="style.css"
head
body
div class="pricing-card"
h2 Pro Plan /h2
h3 19 span /month /span /h3

ul
li ✔ Unlimited Projects /li
li ✔ Premium UI Components /li
li ✔ Lifetime Updates /li
li ✔ Priority Support /li
/ul

button Get Started /button
/div
/body
/html

⭐ CSS (safe)
body{
margin:0;height:100vh;display:flex;justify-content:center;align-items:center;
background:radial-gradient(circle at top,#101020,#06060f);
font-family:Poppins,sans-serif;
}
.pricing-card{
width:300px;padding:28px;background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.15);backdrop-filter:blur(16px);
border-radius:22px;box-shadow:0 8px 40px rgba(0,0,0,0.4),0 0 40px rgba(122,252,255,0.1);
color:#fff;text-align:center;animation:pop 1.5s ease forwards;
}
.pricing-card h2{margin:0;font-size:24px;letter-spacing:1px}
.pricing-card h3{
font-size:34px;margin:10px 0 20px;
background:linear-gradient(90deg,#7afcff,#8a7aff);
-webkit-background-clip:text;color:transparent;
}
.pricing-card h3 span{font-size:14px;color:#dcdcdc}
.pricing-card ul{list-style:none;padding:0;margin:0 0 20px}
.pricing-card ul li{margin:10px 0;color:#dfefff;font-size:14px}
.pricing-card button{
width:100%;padding:12px;border:none;border-radius:12px;
background:linear-gradient(90deg,#7afcff,#8a7aff);
font-size:15px;font-weight:700;color:#000;
box-shadow:0 0 18px rgba(122,252,255,0.4);cursor:pointer;transition:0.3s;
}
.pricing-card button:hover{
transform:translateY(-4px) scale(1.03);
box-shadow:0 0 26px rgba(122,252,255,0.7);
}
@keyframes pop{
0%{transform:scale(0.7);opacity:0}
100%{transform:scale(1);opacity:1}
}

#html #css #pricingcard #glassmorphism #shorts #amitTutorial #webdesign #frontend