Glassmorphism is one of the most trending UI aesthetics right now. It uses background blur to create a frosted glass effect that looks incredibly premium.

The Glassmorphism Base

To get the perfect glass effect, you need:

  1. background: rgba(255, 255, 255, 0.1)
  2. backdrop-filter: blur(15px)
  3. A transparent white border to simulate the glass edge.
.credit-card {
  width: 360px;
  height: 220px;
  background: rgba(255, 255, 255, 0.05); /* Very slight white */
  backdrop-filter: blur(15px);           /* Frosted blur */
  -webkit-backdrop-filter: blur(15px);   /* Safari */
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.5); /* Highlight edge */
  border-left: 1px solid rgba(255, 255, 255, 0.5); /* Highlight edge */
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  padding: 25px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Check out the Live Demo to see the card floating in 3D space with a vibrant gradient background.