Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Gradient Text w/Drop Shadow

Gradient Text w/Drop Shadow

Uses a mix-blend-mode screen over the text, which gradiates the text as well as the text-shadow. Not so fancy on backgrounds other than white.

A Pen by Jase on CodePen.

License.

<blockquote>
<h1 class="gradient-text">If you want to go quickly, go alone. If you want to go far, go together.</h1>
<p><cite>&ndash; Probably Not Really An African Proverb</cite></p>
</blockquote>
@import 'https://fonts.googleapis.com/css?family=Kaushan+Script';
.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%, #aa048b, #bb9801);
mix-blend-mode: screen;
}
}
// boring
body {
font-size: 4vmax;
text-align: center;
background: #fff;
color: #000;
}
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment