<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>10 Stunning Blockquote CSS Styles</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Georgia:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
</head>

<body>
  <div class="container">
    <h1>10 Stunning Blockquote CSS Styles</h1>

    <!-- 1. Classic Typography -->
    <div class="demo-section">
      <h2 class="demo-title">1. Classic Typography-Inspired Blockquote</h2>
      <blockquote class="classic-blockquote">
        <p>The best way to predict the future is to create it. Typography has the power to make words come alive and inspire action through timeless design principles.</p>
        <cite>Peter Drucker</cite>
      </blockquote>
    </div>

    <!-- 2. Minimalist -->
    <div class="demo-section">
      <h2 class="demo-title">2. Minimalist Blockquote with Clean Borders</h2>
      <blockquote class="minimalist-blockquote">
        <p>Simplicity is the ultimate sophistication. In design, less is often more when executed with precision and purpose.</p>
        <footer>
          <cite>Leonardo da Vinci</cite>
        </footer>
      </blockquote>
    </div>

    <!-- 3. Gradient Accent -->
    <div class="demo-section">
      <h2 class="demo-title">3. Modern Blockquote with Gradient Accent</h2>
      <blockquote class="gradient-blockquote">
        <p>Innovation distinguishes between a leader and a follower. Modern design embraces bold colors and contemporary aesthetics.</p>
        <cite>Steve Jobs</cite>
      </blockquote>
    </div>

    <!-- 4. Decorative with Drop Cap -->
    <div class="demo-section">
      <h2 class="demo-title">4. Blockquote with Drop Cap and Decorative Quote Mark</h2>
      <blockquote class="decorative-blockquote">
        <p>Design is not just what it looks like and feels like. Design is how it works. Every element serves a purpose in creating memorable experiences.</p>
        <footer>
          <cite>Steve Jobs</cite>
        </footer>
      </blockquote>
    </div>

    <!-- 5. Glassmorphism -->
    <div class="demo-section">
      <h2 class="demo-title">5. Glassmorphism Blockquote Effect</h2>
      <blockquote class="glass-blockquote">
        <p>The future belongs to organizations that can turn today's information into tomorrow's insight. Transparency in design creates depth and sophistication.</p>
        <cite>Unknown</cite>
      </blockquote>
    </div>

    <!-- 6. Dark Mode Adaptive -->
    <div class="demo-section">
      <h2 class="demo-title">6. Dark Mode Friendly Blockquote</h2>
      <blockquote class="theme-adaptive-blockquote">
        <p>Adaptability is about the powerful difference between adapting to cope and adapting to win. Design that responds to user preferences shows true thoughtfulness.</p>
        <cite>Max McKeown</cite>
      </blockquote>
    </div>

    <!-- 7. Interactive Hover -->
    <div class="demo-section">
      <h2 class="demo-title">7. Interactive Blockquote with Hover Effects</h2>
      <p class="hover-instruction">Hover over the blockquote below to see the interactive effect</p>
      <blockquote class="interactive-blockquote">
        <p>The details are not the details. They make the design. Interactive elements should enhance, not distract from the core message.</p>
        <cite>Charles Eames</cite>
      </blockquote>
    </div>

    <!-- 8. Card Style -->
    <div class="demo-section">
      <h2 class="demo-title">8. Card-Style Blockquote with Shadow and Depth</h2>
      <blockquote class="card-blockquote">
        <p>Good design is obvious. Great design is transparent. The card metaphor in digital design creates familiar and comfortable user experiences.</p>
        <cite>Joe Sparano</cite>
      </blockquote>
    </div>

    <!-- 9. Author Attribution -->
    <div class="demo-section">
      <h2 class="demo-title">9. Blockquote with Author Attribution</h2>
      <blockquote class="attributed-blockquote">
        <p>Content precedes design. Design in the absence of content is not design, it's decoration. Proper attribution respects the source while maintaining visual hierarchy.</p>
        <footer>
          <cite>Jeffrey Zeldman
            <span class="author-title">Web Design Pioneer</span>
          </cite>
        </footer>
      </blockquote>
    </div>

    <!-- 10. Responsive -->
    <div class="demo-section">
      <h2 class="demo-title">10. Responsive Blockquote Layout</h2>
      <blockquote class="responsive-blockquote">
        <p>Responsive design is not about mobile vs desktop. It's about creating the best experience for every user, regardless of how they access your content. This blockquote adapts beautifully across all screen sizes.</p>
        <cite>Ethan Marcotte</cite>
      </blockquote>
    </div>
  </div>
</body>

</html>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  line-height: 1.6;
  color: #333;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  padding: 2rem 1rem;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 20px;
  padding: 3rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  margin-bottom: 3rem;
  color: #2c3e50;
  font-size: 2.5rem;
  font-weight: 700;
}

.demo-section {
  margin-bottom: 4rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid #e0e0e0;
}

.demo-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.demo-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* CSS Variables for Dark Mode Support */
:root {
  --blockquote-bg: #f8f9fa;
  --blockquote-border: #3498db;
  --blockquote-text: #2c3e50;
  --blockquote-accent: #7f8c8d;
}

@media (prefers-color-scheme: dark) {
  :root {
    --blockquote-bg: #2c3e50;
    --blockquote-border: #52c5f7;
    --blockquote-text: #ecf0f1;
    --blockquote-accent: #bdc3c7;
  }
}

/* Reset default blockquote styles */
blockquote {
  margin: 0;
  padding: 0;
  quotes: none;
}

blockquote:before,
blockquote:after {
  content: "";
  content: none;
}

/* 1. Classic Typography-Inspired Blockquote */
.classic-blockquote {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.6;
  margin: 2rem 0;
  padding: 1.5rem 2rem;
  position: relative;
  color: #2c3e50;
}

.classic-blockquote:before {
  content: '"';
  font-size: 4rem;
  font-weight: bold;
  position: absolute;
  left: -10px;
  top: -20px;
  color: #bdc3c7;
  font-family: "Georgia", serif;
}

.classic-blockquote cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-weight: 600;
  font-size: 0.9rem;
  color: #7f8c8d;
}

.classic-blockquote cite:before {
  content: "— ";
}

/* 2. Minimalist Blockquote with Clean Borders */
.minimalist-blockquote {
  border-left: 4px solid #3498db;
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-size: 1.1rem;
  line-height: 1.7;
  color: #34495e;
  background-color: #f8f9fa;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.minimalist-blockquote p {
  margin: 0;
}

.minimalist-blockquote footer {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: #6c757d;
  font-weight: 500;
}

/* 3. Modern Blockquote with Gradient Accent */
.gradient-blockquote {
  position: relative;
  margin: 2.5rem 0;
  padding: 2rem;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.gradient-blockquote:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px 0 0 8px;
}

.gradient-blockquote p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #2c3e50;
  margin: 0;
}

.gradient-blockquote cite {
  display: block;
  margin-top: 1.5rem;
  font-size: 0.95rem;
  color: #7f8c8d;
  font-weight: 600;
}

/* 4. Blockquote with Drop Cap and Decorative Quote Mark */
.decorative-blockquote {
  position: relative;
  margin: 3rem 0;
  padding: 2rem 2rem 2rem 4rem;
  font-size: 1.2rem;
  line-height: 1.7;
  color: #2c3e50;
}

.decorative-blockquote:before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 5rem;
  line-height: 1;
  color: #e74c3c;
  font-family: "Georgia", serif;
  opacity: 0.7;
}

.decorative-blockquote p:first-child:first-letter {
  float: left;
  font-size: 4rem;
  line-height: 3rem;
  margin: 0.2rem 0.5rem 0 0;
  font-weight: bold;
  color: #e74c3c;
  font-family: "Georgia", serif;
}

.decorative-blockquote footer {
  margin-top: 1.5rem;
  text-align: right;
  font-style: italic;
  color: #7f8c8d;
}

/* 5. Glassmorphism Blockquote Effect */
.glass-blockquote {
  position: relative;
  margin: 2.5rem 0;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

.glass-blockquote p {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #2c3e50;
  font-weight: 500;
}

.glass-blockquote cite {
  display: block;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #34495e;
  font-weight: 600;
}

/* 6. Dark Mode Friendly Blockquote */
.theme-adaptive-blockquote {
  background-color: var(--blockquote-bg);
  border-left: 4px solid var(--blockquote-border);
  color: var(--blockquote-text);
  padding: 1.5rem;
  margin: 2rem 0;
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.theme-adaptive-blockquote p {
  margin: 0;
}

.theme-adaptive-blockquote cite {
  color: var(--blockquote-accent);
  font-size: 0.9rem;
  margin-top: 1rem;
  display: block;
}

/* 7. Interactive Blockquote with Hover Effects */
.interactive-blockquote {
  position: relative;
  margin: 2rem 0;
  padding: 1.5rem 2rem;
  background-color: #ffffff;
  border-left: 4px solid #e0e0e0;
  border-radius: 5px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.interactive-blockquote:hover {
  border-left-color: #3498db;
  background-color: #f8f9fa;
  transform: translateX(5px);
  box-shadow: 0 4px 20px rgba(52, 152, 219, 0.15);
}

.interactive-blockquote p {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #2c3e50;
  transition: color 0.3s ease;
}

.interactive-blockquote:hover p {
  color: #1e3a8a;
}

.interactive-blockquote cite {
  display: block;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #7f8c8d;
  font-weight: 500;
  transition: color 0.3s ease;
}

.interactive-blockquote:hover cite {
  color: #3498db;
}

/* 8. Card-Style Blockquote with Shadow and Depth */
.card-blockquote {
  background: #ffffff;
  padding: 2rem;
  margin: 2.5rem 0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  position: relative;
  overflow: hidden;
}

.card-blockquote:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3498db, #2ecc71);
}

.card-blockquote p {
  font-size: 1.2rem;
  line-height: 1.7;
  color: #2c3e50;
  margin: 0 0 1.5rem 0;
  position: relative;
}

.card-blockquote cite {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  color: #7f8c8d;
  font-weight: 600;
}

.card-blockquote cite:before {
  content: "— ";
  margin-right: 0.5rem;
  color: #bdc3c7;
}

/* 9. Blockquote with Author Attribution */
.attributed-blockquote {
  margin: 2.5rem 0;
  padding: 2rem;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 10px;
  position: relative;
}

.attributed-blockquote p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #2c3e50;
  margin: 0;
  font-weight: 500;
}

.attributed-blockquote footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(44, 62, 80, 0.1);
}

.attributed-blockquote cite {
  font-style: normal;
  font-weight: 600;
  color: #34495e;
  font-size: 0.95rem;
}

.attributed-blockquote .author-title {
  display: block;
  font-size: 0.85rem;
  color: #7f8c8d;
  font-weight: 400;
  margin-top: 0.25rem;
  font-variant: small-caps;
  letter-spacing: 0.5px;
}

/* 10. Responsive Blockquote Layouts */
.responsive-blockquote {
  margin: 1.5rem 0;
  padding: 1rem;
  border-left: 3px solid #3498db;
  background-color: #f8f9fa;
  font-size: 1rem;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .responsive-blockquote {
    margin: 2.5rem 0;
    padding: 2rem;
    border-left-width: 5px;
    font-size: 1.2rem;
    line-height: 1.7;
  }
}

@media (min-width: 1024px) {
  .responsive-blockquote {
    margin: 3rem auto;
    max-width: 800px;
    padding: 2.5rem 3rem;
    font-size: 1.3rem;
    border-radius: 8px;
  }
}

.responsive-blockquote p {
  margin: 0;
}

.responsive-blockquote cite {
  font-size: 0.8rem;
  margin-top: 1rem;
  display: block;
}

@media (min-width: 768px) {
  .responsive-blockquote cite {
    font-size: 0.9rem;
    margin-top: 1.5rem;
  }
}

/* Demo-specific styles */
.hover-instruction {
  text-align: center;
  font-size: 0.9rem;
  color: #7f8c8d;
  margin-bottom: 1rem;
  font-style: italic;
}

/* Mobile responsiveness for demo */
@media (max-width: 768px) {
  .container {
    padding: 1.5rem;
    margin: 1rem;
  }

  h1 {
    font-size: 2rem;
  }

  .demo-title {
    font-size: 1.3rem;
  }

  .demo-section {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.