Glassmorphism Credit Card
This component demonstrates how to use backdrop-blur and bg-white/xx (alpha transparency) to create a frosted glass effect.
Get Code
VISA
1234 5678 9876 5432
CARD HOLDER
JOHN DOE
EXPIRES
12/25
<template>
<div class="relative w-96 h-56 bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl p-6 text-white">
<!-- The Glass Layer -->
<div class="h-full w-full backdrop-blur-md bg-white/10 border border-white/20 rounded-lg p-4">
<!-- Content here -->
</div>
</div>
</template>