CSS Blockquote UI

Faraz

By Faraz -

Learn how to create a stylish and modern blockquote using HTML and CSS. Step-by-step guide with responsive design and clean typography.

Join us on Telegram
blockquote-design-with-html-and-css.webp
Read Alsohow to create drag and drop files with html, css and javascript.pngCreate Drag and Drop File Upload with HTML, CSS and jQuery

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. Conclusion
  5. Preview

If you're building a modern website or blog, adding stylish quotes can make your content stand out. One of the best ways to do this is with a custom HTML and CSS blockquote design. A blockquote is commonly used to show quotes, testimonials, or important messages.

In this tutorial, you’ll learn how to create a modern, responsive, and animated blockquote using just HTML and CSS. It looks professional, works on all devices, and includes soft shadows, Google Fonts, and animated glow effects.

Prerequisites:

Before starting, make sure you know the basics of:

  • HTML structure
  • CSS styling and Flex/Grid
  • How to add Google Fonts
  • Basic understanding of media queries

Source Code

Step 1 (HTML Code):

To get started, we first need to create a basic HTML file. In this file, we will include the main structure for our blockquote. Let's break down the HTML code:

<!DOCTYPE html>

  • This tells the browser that the page is written in HTML5 — the latest standard of HTML.

<html lang="en">

  • This starts the HTML document and sets the language to English (en) for better accessibility and SEO.

<head>

This section contains information about the web page that isn't visible on the page itself.

Inside the <head>:

  • <meta charset="UTF-8" />
    Tells the browser to use UTF-8 character encoding, which supports most characters from all languages.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    Ensures your design is responsive — it adjusts to different screen sizes, especially mobile.
  • <title>Blockquote CSS</title>
    Sets the title of the web page (shown in the browser tab).
  • <link href="https://fonts.googleapis.com/...
    Loads Google Fonts:
    • Playfair Display for the quote text (stylish serif)
    • Outfit for body text (clean sans-serif)
  • <link rel="stylesheet" href="styles.css">
    Links to an external CSS file named styles.css that contains all the styles (design rules) for the page.

<body>

This section contains the visible content of the web page.

Inside the <body>:

<div class="blockquote-wrapper">
  • Starts the main container that holds the blockquote and its elements.
<div class="accent-bar"></div>
  • A vertical colored bar for decoration, usually placed on the side of the quote.
<div class="quote-icon">“</div>
  • A large quotation mark symbol (“) to visually represent that it's a quote.
<div class="animated-glow"></div>
  • A background glow effect using CSS animations to make the quote look modern and dynamic.
<blockquote>
  "Innovation distinguishes between a leader and a follower."
  <cite>— Steve Jobs</cite>
</blockquote>
  • The actual quote text, using the <blockquote> tag.
  • The <cite> tag is used to credit the author — here, it's Steve Jobs.
Read AlsoCreating Engaging Captchas with HTML, CSS, and JavaScript.jpgCreating Engaging Captchas with HTML, CSS, and JavaScript

Step 2 (CSS Code):

Once the basic HTML structure of the blockquote is in place, the next step is to add styling to the blockquote using CSS. Let's break down the CSS code step by step:

Universal Reset

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
  • * selector targets all elements.
  • box-sizing: border-box: Makes width/height include padding and border (easier to control layout).
  • margin: 0; padding: 0;: Resets default spacing added by browsers for a clean layout.

Body Styling

body {
  font-family: 'Outfit', sans-serif;
  background: #825CFF;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 2rem;
}
  • Font: Uses a clean Google Font called 'Outfit'.
  • Background: Purple color #825CFF.
  • Flexbox: Centers content both vertically and horizontally.
  • min-height: 100vh: Ensures full-screen height.
  • padding: 2rem: Adds space around the content.

Blockquote Container

.blockquote-wrapper {
  position: relative;
  background: #fff;
  border-radius: 2rem;
  padding: 3rem;
  max-width: 900px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  align-items: center;
}
  • Container with rounded corners and a white background.
  • box-shadow: Adds a soft shadow for depth.
  • display: grid: Splits layout into 2 columns (icon + text).
  • gap: Space between the icon and quote text.
  • position: relative: Needed for absolute positioning of child elements.
  • overflow: hidden: Hides anything that goes outside the rounded box.

Quote Icon Styling

.quote-icon {
  font-size: 6rem;
  color: #7b68ee;
  opacity: 0.2;
  position: absolute;
  top: -20px;
  left: 20px;
  z-index: 0;
}
  • Displays a large quotation mark.
  • Light purple color with low opacity for a subtle background feel.
  • position: absolute: Positioned at top-left inside the wrapper.
  • z-index: 0: Keeps it behind the text.

Blockquote Text

blockquote {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  line-height: 1.7;
  color: #222;
  z-index: 1;
  position: relative;
}
  • Main quote text.
  • Elegant serif font 'Playfair Display'.
  • z-index: 1: Appears above background elements.
  • position: relative: Allows z-index to work.

Cite (Author Name)

cite {
  display: block;
  font-size: 1rem;
  color: #555;
  margin-top: 1.5rem;
  text-align: right;
  font-style: normal;
  font-weight: 600;
  z-index: 1;
}
  • Displays author name on a new line.
  • Small, light gray text aligned to the right.
  • font-style: normal: Overrides browser default italic for <cite>.
  • font-weight: 600: Bold for emphasis.

Accent Bar

.accent-bar {
  width: 6px;
  background: linear-gradient(to bottom, #7b68ee, #957DAD);
  border-radius: 10px;
  height: 100%;
}
  • A vertical bar beside the quote for decoration.
  • Gradient from light purple to violet.
  • Rounded edges.

Animated Glow Background

.animated-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(123, 104, 238, 0.1) 0%, transparent 70%);
  animation: pulse 6s infinite ease-in-out;
  z-index: 0;
}
  • A large glowing background effect that animates softly.
  • Radial gradient gives a light purple glow.
  • Grows and shrinks using the pulse animation.

Glow Animation Keyframes

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}
  • Creates a pulsing animation:
    • Grows slightly bigger (scale(1.1)) at 50%
    • Fades in/out using opacity

Mobile Responsiveness

@media (max-width: 768px) {
  .blockquote-wrapper {
    grid-template-columns: 1fr;
    padding: 2rem;
  }

  blockquote {
    font-size: 1.3rem;
  }
}
  • Responsive design for screens smaller than 768px:
    • Changes the layout to 1 column
    • Reduces padding and text size to fit smaller screens
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Outfit', sans-serif;
  background: #825CFF;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 2rem;
}

.blockquote-wrapper {
  position: relative;
  background: #fff;
  border-radius: 2rem;
  padding: 3rem;
  max-width: 900px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  align-items: center;
}

.quote-icon {
  font-size: 6rem;
  color: #7b68ee;
  opacity: 0.2;
  position: absolute;
  top: -20px;
  left: 20px;
  z-index: 0;
}

blockquote {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  line-height: 1.7;
  color: #222;
  z-index: 1;
  position: relative;
}

cite {
  display: block;
  font-size: 1rem;
  color: #555;
  margin-top: 1.5rem;
  text-align: right;
  font-style: normal;
  font-weight: 600;
  z-index: 1;
}

.accent-bar {
  width: 6px;
  background: linear-gradient(to bottom, #7b68ee, #957DAD);
  border-radius: 10px;
  height: 100%;
}

.animated-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(123, 104, 238, 0.1) 0%, transparent 70%);
  animation: pulse 6s infinite ease-in-out;
  z-index: 0;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .blockquote-wrapper {
    grid-template-columns: 1fr;
    padding: 2rem;
  }

  blockquote {
    font-size: 1.3rem;
  }
}

Final Output:

blockquote-design-with-html-and-css.gif
Read Also3d gradient card with dynamic hover - css.jpgCSS 3D Gradient Card with Dynamic Hover Effect

Conclusion:

And that's it! You've now created a modern, responsive, and animated blockquote design using pure HTML and CSS. This blockquote will help make your website look more professional and engaging.

Whether you're adding quotes, testimonials, or highlights, this design can be easily reused and customized to suit your needs. Try adjusting the font, color scheme, or animation timing to align with your brand's style.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: how to make stylish blockquote in html and css, responsive blockquote design using css, modern html blockquote with animation, clean blockquote ui design tutorial, blockquote css, html blockquote
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Components

Please allow ads on our site🥺