Pure CSS3 pullquote

In this post I'll show you how to create a pullquote with the latest features of CSS3, namely gradients, rounded corners, box shadows and transformations. We'll also use generated content and we're going to rotate it. The final effect is surely very impressive from a visual point of view. Let's get to the details.

The CSS code is as follows:

blockquote {
  background: rgb(226,226,226); /* Old browsers */
background: -moz-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(226,226,226,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(254,254,254,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* W3C */
  width: 30%;
  padding: 1em;
  font: 100% Georgia, serif;
  line-height: 1.4;
  border: 1px solid #999;
  border-radius: 10px;
  box-shadow: 4px 4px 4px rgba(240, 240, 240, 0.7);
  position: relative;
  margin: 0 1em 0.3em 0;
  float: left;
}

blockquote p {margin: 0;}

blockquote:after {
	content: '\201C';
	display: block;
	font-size: 10em;
	color: #444;
	position: absolute;
	top: -40px;
	left: -70px;
	opacity: 0.5;
	-moz-transform: rotate(-10deg);
	-webkit-transform: rotate(-10deg);
	-o-transform: rotate(-10deg);
	-ms-transform: rotate(-10deg);
	transform: rotate(-10deg);
}

Single quotes have been generated via generated content, rotated and absolutely positioned at the top of the pullquote. Also, its opacity has been adjusted and its left offset is negative so that we can position it on the outer left edge of the pullquote. You can see the demo below.

Demo

Live demo