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

<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,
.pullquote:before,
.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:before,
.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