UINEXA SNIPPET

Glassmorphism Card

A clean glass-style content card with backdrop blur, soft borders, layered gradients and a polished hover state.

CSS HTML Beginner FREE FEATURED

Snippet Details

Difficulty: Beginner

Type: Frontend Effect

Status: Copy & Paste Ready

Live Preview

Test the effect before copying.

Source Code

Copy the code into your project.

<div class="ux-glass-scene">
  <span class="ux-glass-scene__orb ux-glass-scene__orb--one"></span>
  <span class="ux-glass-scene__orb ux-glass-scene__orb--two"></span>

  <article class="ux-glass-card">
    <div class="ux-glass-card__icon" aria-hidden="true">✦</div>

    <span class="ux-glass-card__eyebrow">Premium UI</span>

    <h3 class="ux-glass-card__title">
      Glassmorphism Card
    </h3>

    <p class="ux-glass-card__text">
      Combine blur, transparency and subtle borders to create
      depth without making the interface feel heavy.
    </p>

    <div class="ux-glass-card__footer">
      <span>CSS Effect</span>

      <a href="#your-link">
        Explore
        <span aria-hidden="true">↗</span>
      </a>
    </div>
  </article>
</div>

/* =====================================================
   UINEXA – GLASSMORPHISM CARD
===================================================== */

.ux-glass-scene {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 420px;
  padding: 48px 24px;
  overflow: hidden;
  border-radius: 30px;
  isolation: isolate;
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(108, 99, 255, .2),
      transparent 32%
    ),
    radial-gradient(
      circle at 82% 82%,
      rgba(0, 212, 255, .14),
      transparent 30%
    ),
    #070B18;
}

.ux-glass-scene__orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}

.ux-glass-scene__orb--one {
  top: 52px;
  left: 12%;
  width: 125px;
  height: 125px;
  background:
    linear-gradient(
      135deg,
      #8B5CF6,
      #3B82F6
    );
  animation: uxGlassFloatOne 7s ease-in-out infinite;
}

.ux-glass-scene__orb--two {
  right: 10%;
  bottom: 42px;
  width: 105px;
  height: 105px;
  background:
    linear-gradient(
      135deg,
      #22D3EE,
      #6C63FF
    );
  animation: uxGlassFloatTwo 8s ease-in-out infinite;
}

.ux-glass-card {
  position: relative;
  width: min(100%, 390px);
  padding: 34px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 26px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .12),
      rgba(255, 255, 255, .035)
    );
  box-shadow:
    0 32px 80px rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  color: #FFFFFF;
  transition:
    transform 280ms cubic-bezier(.2, .8, .2, 1),
    border-color 280ms ease,
    box-shadow 280ms ease;
}

.ux-glass-card::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -70px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  filter: blur(25px);
  pointer-events: none;
}

.ux-glass-card:hover {
  border-color: rgba(255, 255, 255, .26);
  box-shadow:
    0 42px 100px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .16);
  transform: translateY(-8px);
}

.ux-glass-card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 24px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 15px;
  background: rgba(255, 255, 255, .07);
  color: #7CFFB2;
  font-size: 21px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.ux-glass-card__eyebrow {
  display: block;
  margin-bottom: 12px;
  color: #00D4FF;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.ux-glass-card__title {
  margin: 0 0 14px;
  color: #FFFFFF;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -.035em;
}

.ux-glass-card__text {
  margin: 0;
  color: #A7B0C3;
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.75;
}

.ux-glass-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .09);
}

.ux-glass-card__footer > span {
  color: #6F7B94;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.ux-glass-card__footer a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #FFFFFF;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.ux-glass-card__footer a span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  transition:
    transform 220ms ease,
    background 220ms ease;
}

.ux-glass-card__footer a:hover span {
  background: rgba(0, 212, 255, .12);
  transform: rotate(45deg);
}

@keyframes uxGlassFloatOne {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(18px, 22px, 0);
  }
}

@keyframes uxGlassFloatTwo {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(-22px, -18px, 0);
  }
}

@media (max-width: 767px) {
  .ux-glass-scene {
    min-height: 360px;
    padding: 32px 16px;
  }

  .ux-glass-card {
    padding: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ux-glass-scene__orb,
  .ux-glass-card,
  .ux-glass-card__footer a span {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

Installation

How to use this snippet

1. Add an HTML widget in Elementor.

2. Paste the HTML code into the widget.

3. Add the CSS code to Elementor Custom CSS or your website stylesheet.

4. Replace #your-link with the destination URL of the card link.

5. Edit the eyebrow, title and description directly in the HTML.

6. Test the blur and hover effect on desktop and mobile.

Elementor Note

Elementor usage

Use an Elementor HTML widget for the HTML structure. The effect works without JavaScript. Backdrop blur may appear slightly different depending on the browser and the background behind the card.

Browser Support

Works in modern browsers.

Chrome ✓

Firefox ✓

Safari ✓

Edge ✓