A Collection of hand-picked 20 Nice Blockquotes Inspirations With Css.

1.QUOTE CARDS

Sliding quote cards.

Made with

1
2
Html
Css/SCSS

Author

1
Sabine Robart

Demo


2.QUOTE ANIMATION

Pure CSS, flashy purple gradient text with background-clip masking, animation sequence to reveal words & brackets.

Made with

1
2
Html
Css/SCSS

Author

1
Sabine Robart

Demo


3.QUOTE BOX HOVER EFFECTS

HTML and CSS quote with box hover effects.

Made with

1
2
Html
Css/SCSS

Author

1
abdel Rhman

Demo


4.PURE CSS QUOTE

Pure CSS quote with speech bubble border.

Made with

1
2
Html
Css/SCSS

Author

1
Juan Pablo

Demo


5.QUOTE: STEVEN PRESSFIELD

HTML and CSS quote with top/bottom border.

Made with

1
2
Html
Css/SCSS

Author

1
Juan Pablo

Demo


6.BLOCKQUOTE STYLES

Different styles for showing quotes. Some have gentle animations.

Made with

1
2
Html
Css/SCSS

Author

1
Chris Smith

Demo


7.QUOTE EXAMPLE

Quotes with Font Awesome and pseudo elements.

Made with

1
2
Html
Css/SCSS

Author

1
Jaime

Demo


8.BLOCKQUOTE, FLEXBOX, RGBA, BEFORE CONTENT

Experimenting with various CSS techniques to help beginners experiment with positioning, colors, transparency, and Flexbox.

Made with

1
2
Html
Css/SCSS

Author

1
Jacob Lett

Demo


9.QUOTE STYLING

Elegant quote styling.

Made with

1
2
Html
Css/SCSS

Author

1
Joe Hasting

Demo


10.Quote Hovering

HTML and CSS quote hovering.

Made with

1
2
Html
Css/SCSS

Author

1
Lisi

Demo


11.PURE CSS BLOCKQUOTE

Elegant and responsive blockquote solution. Highlight quote text for a neat animation.

Made with

1
2
Html
Css/SCSS

Author

1
John Fink

Demo


12.CSS Typography Quote

For what it’s worth, you can replace the quote with one of your own. As long as each paragraph is marked up properly and the author attribution is also in a paragraph tag, the quotes will still function the same way!

Made with

1
2
Html
Css/SCSS

Author

1
Josh Collinsworth

Demo


13.CSS Quote Effect

Quote effect using a CSS blur filter.

Made with

1
2
Html
Css/SCSS

Author

1
14islands

Demo


14.Flexbox Quote Bricks

Quote Bricks with HTML and CSS flexbox.

Made with

1
2
Html
Css/SCSS

Author

1
Andrea Roenning

Demo


15.POLYGON-STYLE GRADIENT PULL QUOTE

Made with

1
2
Html
Css/SCSS

Author

1
Matt Popovich

Demo


16.CSS Quote Style

HTML and CSS quote style.

Made with

1
2
Html
Css/SCSS

Author

1
Screeny

Demo


17.STYLING BLOCKQUOTES

Styling blockquotes with box-shadow.

Made with

1
2
Html
Css/SCSS

Author

1
Ramón M. Cros

Demo


18.Quote Author

Only CSS quote style.

Made with

1
2
Html
Css/SCSS

Author

1
Mohan Khadka

Demo


19.Continuous Image Border Quote

Continuous image border quote with HTML and CSS.

Made with

1
2
Html
Css/SCSS

Author

1
Joni Trythall

Demo


20.Quote Container

Pure CSS quote container.

Made with

1
2
Html
Css/SCSS

Author

1
Iulian Savin

Demo