Gradient Text and Drop Shadow Quote
HTML
<blockquote>
<h1 class="gradient-text">The best preparation for tomorrow is doing your best today.</h1>
<p><cite>– H. Jackson Brown, Jr.</cite></p>
</blockquote>
SCSS
.gradient-text {
position: relative;
text-shadow: .15em .15em .35em #888;
padding: .5em;
&::after {
content:'';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: radial-gradient(circle at 70% 3%, #3498db, #e74c3c);
mix-blend-mode: screen;
}
}
html {
height: 100%;
width: 100%;
overflow: hidden;
}
body {
font-size: 4vmax;
text-align: center;
background: #fff;
color: #000;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
blockquote {
margin: 0;
}
h1 {
font-family: 'Kaushan Script', sans-serif;
letter-spacing: -.1ch;
margin: 0;
line-height: 1.3;
}
p {
font-family: sans-serif;
font-size: 1ch;
opacity: .35;
}
