Glassmorphism FAQ Accordion Component

A sleek and modern FAQ component featuring glassmorphism design with backdrop blur effects and vibrant borders.

Features

• Glassmorphism Design: Frosted glass effect using backdrop blur and transparency
• Smooth Animations: Elegant transitions for expanding and collapsing FAQ items
• Modern Aesthetics: Contemporary design with vibrant colors and clean typography
• Fully Responsive: Adapts beautifully to all screen sizes
• Accessible: Proper contrast ratios and keyboard navigation support
• Customizable: Easy to customize with CSS custom properties

HTML Structure

<div class="glassmorphism-faq-container">
  <div class="faq-header">
    <h2 class="faq-title">Frequently Asked Questions</h2>
    <p class="faq-subtitle">Answers to your most common questions</p>
  </div>
  
  <div class="faq-accordion">
    <div class="faq-item">
      <div class="faq-question">
        <h3>What is glassmorphism design?</h3>
        <div class="question-icon">+</div>
      </div>
      <div class="faq-answer">
        <p>Glassmorphism is a UI design trend that uses background blur, transparency, and vibrant borders to create a frosted glass effect.</p>
      </div>
    </div>
    
    <div class="faq-item">
      <div class="faq-question">
        <h3>How is the blur effect achieved?</h3>
        <div class="question-icon">+</div>
      </div>
      <div class="faq-answer">
        <p>The blur effect is created using the CSS backdrop-filter property with a blur value, combined with semi-transparent backgrounds.</p>
      </div>
    </div>
    
    <div class="faq-item">
      <div class="faq-question">
        <h3>Is this design accessible?</h3>
        <div class="question-icon">+</div>
      </div>
      <div class="faq-answer">
        <p>Yes, we've implemented proper contrast ratios, keyboard navigation, and ARIA attributes for accessibility.</p>
      </div>
    </div>
    
    <div class="faq-item">
      <div class="faq-question">
        <h3>Can I customize the colors?</h3>
        <div class="question-icon">+</div>
      </div>
      <div class="faq-answer">
        <p>Absolutely! The component uses CSS custom properties that make it easy to change colors, blur intensity, and borders.</p>
      </div>
    </div>
  </div>
</div>

CSS Styles

.glassmorphism-faq-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.glassmorphism-faq-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="%23ffffff" opacity="0.1"/><circle cx="80" cy="80" r="2" fill="%23ffffff" opacity="0.1"/><circle cx="40" cy="60" r="1" fill="%23ffffff" opacity="0.2"/></svg>');
  pointer-events: none;
}

.faq-header {
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}

.faq-title {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: white;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.faq-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.1rem;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  z-index: 2;
}

.faq-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.faq-item:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.faq-question {
  padding: 1.5rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-question h3 {
  margin: 0;
  font-size: 1.2rem;
  color: white;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.question-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: white;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.faq-item.active .question-icon {
  transform: rotate(45deg);
  background: rgba(255, 255, 255, 0.3);
}

.faq-answer {
  padding: 0 1.5rem;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(255, 255, 255, 0.05);
}

.faq-item.active .faq-answer {
  padding: 0 1.5rem 1.5rem;
  max-height: 200px;
}

.faq-answer p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .glassmorphism-faq-container {
    padding: 1rem;
  }
  
  .faq-title {
    font-size: 2rem;
  }
  
  .faq-question {
    padding: 1.25rem;
  }
  
  .faq-question h3 {
    font-size: 1.1rem;
  }
  
  .faq-item.active .faq-answer {
    padding: 0 1.25rem 1.25rem;
  }
}

JavaScript Functionality

document.addEventListener('DOMContentLoaded', function() {
  const faqItems = document.querySelectorAll('.faq-item');
  
  faqItems.forEach(item => {
    const question = item.querySelector('.faq-question');
    
    question.addEventListener('click', () => {
      const isActive = item.classList.contains('active');
      
      // Close all other items
      faqItems.forEach(otherItem => {
        if (otherItem !== item) {
          otherItem.classList.remove('active');
        }
      });
      
      // Toggle current item
      if (isActive) {
        item.classList.remove('active');
      } else {
        item.classList.add('active');
      }
    });
  });
});

Implementation Guide

1. Copy the HTML structure into your project
2. Add the CSS styles to your stylesheet
3. Include the JavaScript code in your script file
4. Customize the gradient colors and blur intensity to match your brand
5. Add your own FAQ questions and answers

The glassmorphism FAQ accordion features a frosted glass effect using backdrop blur and transparency, creating a modern and visually appealing interface. The design is fully responsive and includes smooth animations for expanding and collapsing FAQ items.