✨ Snappy's Gradient Text Tutorial
You might have seen me use gradient text in a few of my artworks, and it is a great tool to make a posts tand out! I learned from this post, but find some of the information outdated, so I am making a tutorial of my own!
To my knowledge, this is only possible via desktop mode, as access to the HTML function is necessary. Alongside desktop mode, you need access to a text color fader! There's a few options out there, but I use:
Let's get to the tutorial!
- Have the text you want to turn into a gradient ready and copy it to your clipboard.
2. Open the text color fader and paste your text into the box labeled "your message".
3. For the most basic gradients, you may ignore the boxes on the right. The leftmost boxes allow you to choose between preset colors or making your own colors.
Tip: if you are making a gradient for something such as art, I reccoment grabbing a few hex codes from the image to use for your gradient. This allows you to have control over your colors. You may also save a pallet if you want to use it again
4. When you are happy with your colors, generate your text.
5. You will be brought to this page. If you are happy with the colors, click "select all" and copy the HTML to your clipboard.
TIP: check your text against both a dark and light background to ensure it will be readable to viewers on dark and light mode. If it is not you can tweak the colors by choosing "create new fade".
6. Open Tumblr again and open your post. At the top right there is a grear icon. Click the icon and scroll down to the text editor. Change the setting from "rich text" to "HTML"
7. When you move to HTML, your post will look very different! In the HTML, your goal is to find the text you want to replace in the code.
TIP: If you can't find it, use "Ctrl + F" to open the keword search function and it will highlight your word.
8. Highlight your plain text, right click it, and paste your HTML from Patorjik into the space.
TIP: The HTML is a confusing mess to look at. Click the "preview" tab to check if your code worked
9. You should see a gradient when you swicth modes!
If the HTML broke your formatting, you can edit it in the preview mode. Once you have done a gradient a couple of times this process is very easy and takes LESS than two minutes. It looks intimidating but after you get the hang it is very achievable! I believe in you guys being able to do it.
Happy gradient texting for you guys!
