Style Blockquotes With A Gradient

You can style HTML blockquote tags to be pull-quotes in long, text-heavy blog posts. Pull-quotes look like block quotes but without a citation source. They’re used to “pull” attention to the key ideas examined in your blog post. Pull-quotes help to break the text up and encourage the reader to stick with your content.

I wanted a super simple way to style blockquotes (to look like pull-quotes) that would create a bit of visual interest, and would also fit well within my site’s colour scheme. I decided to use gradients.

Choose Two Colours

To set up the gradient, I chose two colours that were dark enough to use for text, that also matched the existing colour scheme on my site. The colours I chose are below. You should choose two colours that fit in with your site.

Use A Gradient Generator

I put those two colours into this free gradient generator, but you can use any gradient generator you like to find a list of colours to use. Next I clicked the Generate button. The generator then gave me this CSS code.

Copy The Colours

I didn’t use the code above, but I took the list of colours that were generated. I copied them and ended up with this.

Add BlockQuote Styling

Next, I added the following CSS to my site (I do this via WPCodeBox – a brilliant product). Notice I copied the colours generated by the gradient generator into this CSS. You should do the same using the colours you generate. You can also change the font-size, font-family, border-left color and line-height to your own liking.

Of course you do not have to go through these precise steps. You can instead use the above CSS and include only two colours instead of the six I used … It’s up to you. You can also change the angle of the gradient from 20 degrees (20deg) to something else. Experiment until you find a pull-quote gradient that works for you.

Admire Your Blockquote

This is the resulting blockquote which I tend to use as a pull-quote to break up text-heavy pages. It helps the reader stick with the content and pulls their eye down the page.

It’s a good idea to use the blockquote HTML tag to create pull-quotes inside blog posts.  I wanted to use some easy styling that would make the quotes stand out and serve to break up big walls of text on the page.  So I decided to style them using a CSS gradient.

You can see a subtle example of this type of pull-quote in use on the PET Plus website.