For those looking to use the techniques I used in this post, feel free to check out the usage on these three CSS functions:
- the
linear-gradientfunction of thebackgroundCSS element - the
blurfunction for thefilterCSS element - the
text-shadowCSS element
Here's the HTML I used in my post.
<div style="background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 64%, rgba(0,106,255,1) 100%); width: 640px; height:480px; vertical-align: middle; display: table-cell;">
<p style="filter: blur(1px); font-weight: bolder; line-height: normal; text-align: center; font-family: Georgia,'Times New Roman',serif; font-size:5em; color: #ffe680; text-shadow: 8px 8px 1px black;">FUCK YOU<br />TUMBLR!</p>
</div>
Visually a little messy and confusing, especially with all the rgba() colour declarations. I am terribad at CSS positioning so pls don't think the above is a good example of centring things.
Be mindful that stuff like the filter element might not work on older browsers, so ymmv