Animated Gradient FAQ Component

A modern and visually appealing FAQ component with animated gradient backgrounds and smooth transitions.

Features

• Animated Gradient Backgrounds: Smoothly shifting gradient backgrounds that create a dynamic visual effect
• Smooth Transitions: Elegant animations for expanding and collapsing FAQ items
• Responsive Design: Fully responsive layout that works on all device sizes
• Accessible: Proper ARIA attributes for screen readers and keyboard navigation
• Modern UI: Clean and contemporary design with subtle hover effects
• Lightweight: Optimized code with minimal JavaScript

HTML Structure

<div class="gradient-faq-container">
  <div class="faq-header">
    <h2 class="faq-title">Frequently Asked Questions</h2>
    <p class="faq-subtitle">Find answers to common questions</p>
  </div>
  
  <div class="faq-accordion">
    <div class="faq-item">
      <button class="faq-question" aria-expanded="false">
        <span class="question-text">What makes this FAQ component special?</span>
        <span class="question-icon">+</span>
      </button>
      <div class="faq-answer">
        <p>This FAQ features animated gradient backgrounds, smooth micro-interactions, and a modern design with CSS animations.</p>
      </div>
    </div>
    
    <div class="faq-item">
      <button class="faq-question" aria-expanded="false">
        <span class="question-text">How do the gradient animations work?</span>
        <span class="question-icon">+</span>
      </button>
      <div class="faq-answer">
        <p>The gradient animations use CSS keyframes with background-position transitions to create a flowing effect.</p>
      </div>
    </div>
    
    <div class="faq-item">
      <button class="faq-question" aria-expanded="false">
        <span class="question-text">Is this design responsive?</span>
        <span class="question-icon">+</span>
      </button>
      <div class="faq-answer">
        <p>Yes, the design is fully responsive and adapts beautifully to all screen sizes.</p>
      </div>
    </div>
    
    <div class="faq-item">
      <button class="faq-question" aria-expanded="false">
        <span class="question-text">What browsers support this?</span>
        <span class="question-icon">+</span>
      </button>
      <div class="faq-answer">
        <p>Modern browsers including Chrome, Firefox, Safari, and Edge support all features.</p>
      </div>
    </div>
  </div>
</div>

CSS Styles

.gradient-faq-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  font-family: 'Inter', sans-serif;
}

.faq-header {
  text-align: center;
  margin-bottom: 2rem;
}

.faq-title {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  background: linear-gradient(45deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.faq-subtitle {
  color: #6b7280;
  font-size: 1.1rem;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(45deg, #667eea, #764ba2);
  background-size: 300% 300%;
  animation: gradientShift 8s ease infinite;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.faq-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.faq-question {
  width: 100%;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
  transition: background 0.3s ease;
}

.faq-question:hover {
  background: rgba(255, 255, 255, 1);
}

.question-icon {
  font-size: 1.5rem;
  transition: transform 0.3s ease;
}

.faq-item.active .question-icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9);
  transition: max-height 0.3s ease, padding 0.3s ease;
}

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

.faq-answer p {
  margin: 0;
  color: #4b5563;
  line-height: 1.6;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@media (max-width: 768px) {
  .gradient-faq-container {
    padding: 1rem;
  }
  
  .faq-title {
    font-size: 2rem;
  }
  
  .faq-question {
    padding: 1.25rem;
    font-size: 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 colors, fonts, and animations to match your brand
5. Add your own FAQ questions and answers

This FAQ component features a beautiful animated gradient background that shifts colors smoothly, creating an eye-catching effect. The accordion functionality allows users to expand and collapse questions as needed, and the design is fully responsive for all device sizes.