Back to CSS Blockquotes Glass Card Pure CSS
Share
HTML
<div class="cbq-glass-bg">
  <figure class="cbq-glass">
    <blockquote>
      <p>The best UI is the one you don't notice.</p>
    </blockquote>
    <figcaption>— Lena Park, Product Designer</figcaption>
  </figure>
</div>
CSS
.cbq-glass-bg {
  padding: 28px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7c6cff 0%, #ff6c8a 50%, #2eb88a 100%);
}

.cbq-glass {
  max-width: 320px;
  padding: 22px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #fff;
  font-family: system-ui, sans-serif;
}

.cbq-glass blockquote {
  margin: 0;
}

.cbq-glass p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.cbq-glass figcaption {
  margin-top: 12px;
  font-size: 11px;
  opacity: 0.85;
}