A small CSS trick: you can use multiple text-shadows on a text by comma separating them:
<!-- You can use multiple text shadows by comma separating them -->
<style>
span {
color: #FFF;
font-size: 120px;
font-weight: bold;
text-shadow: -3px -3px 0 #FB01FC, 3px 3px 0 #04FBF6;
}
</style>
<span>ERROR</span>Copied to clipboard!
The example above, will produce the following text:
ERRORIf you were wondering, the different values for text-shadow are as follow:
- value: Represents the X coordinate of the shadow.
- value: Represents the Y coordinate of the shadow.
- value: Sets the amount of blur to be used for the shadow.
- value: Lastly, you can specify the color of the shadow.
Note that you can also use RGBA values for colors to create semi-transparent shadows.
Resources:
Remove ads
Want to get weekly updates to your mailbox? 📬
📚 Get access to exclusive content
Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕
Get access
