<aside class="pullquote" data-feature-quote="Someone will always have an opinion about you.">	
	<p>Someone will always have an opinion about you.</p>

<cite>Rotated & layered gradient text courtesy of <a href="http://www.bloomberg.com/news/features/2015-05-26/evan-spiegel-reveals-plan-to-turn-snapchat-into-a-real-business">Bloomberg</a></cite>
@import url(https://fonts.googleapis.com/css?family=Francois+One);

body {
    text-align: center;
    font-family: "Francois One", sans-serif;
	overflow-x: hidden;
	padding: 50px;
	background-image: -webkit-linear-gradient(left, #FFD7FB, #BCF9E6);
	background-image: -moz-linear-gradient(left, #FFD7FB, #BCF9E6);
	background-image: -o-linear-gradient(left, #FFD7FB, #BCF9E6);
	background-image: linear-gradient(left, #FFD7FB, #BCF9E6);
	/* Below code is needed for the rotation in .pullquote,
	   applied globally because it looks nicer */
	-moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);

.pullquote:after {
    background-image: -webkit-linear-gradient(left, #FF05E9, #00FFB2);
    background-image: -o-linear-gradient(left, #FF05E9, #00FFB2);
	/* Note that there's no -moz because backgrould-clip: text;
	   is not supported in Firefox, so we skip the gradient */	
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-fill-color: #fff;
    -o-text-fill-color: #fff;
    color: transparent;

.pullquote {
    -webkit-text-stroke: 0.1875rem transparent;
    -o-text-stroke: 0.1875rem transparent;    
    color: #FA1E64;
    font-size: 5rem;
    letter-spacing: -0.125rem;
    line-height: 5.625rem;
    margin: auto;
    max-width: 40rem;
    position: relative;
	color: #FF05E9;

.pullquote:after {
    content: attr(data-feature-quote);
    position: absolute;
    width: 100%;

.pullquote:before {
    left: 0.25rem;
    top: -0.25rem;

.pullquote:after {
    left: 0.5rem;
    top: -0.5rem;

p {
	margin: 0.5em 0;

cite {
	font-style: normal;
	text-transform: uppercase;
	color: #fff;
	text-shadow: -1px 1px 2px rgba(0,0,0,0.3);
	letter-spacing: 0.125em;

a {
	color: #5565BE;
	text-decoration: none;
// Slight modifications (color, type) made for fun
// Some properties grouped together for clarity

// Unfortunately, background-clip: text doesn't play nice in Firefox
// This will fall back to rotated, single-color, solid text

// This will NOT WORK if you use autoprefixr or something similar,
// as some properties are deliberately set without a -moz prefix

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.