#gradient text tutorial

✨ 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* (mobile method at end), but not the app, as access to the HTML function is necessary. Alongside that, you need access to a text color fader! There's a few options out there, but I use:

Patorjik's Text Color Fader

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!

𝗚𝗥𝗔𝗗𝗜𝗘𝗡𝗧 𝗧𝗘𝗫𝗧 𝗧𝗨𝗧𝗢𝗥𝗜𝗔𝗟 𝗙𝗢𝗥 𝗧𝗨𝗠𝗕𝗟𝗥

Hello @elvisbdoll 🫶🏻

~ Firstly, I'll share the link from where I learnt to do that. It is explained in a very easy and short way here.

~ You need to use Tumblr web on your phone or laptop for this idk why it doesn't work on the app.

~ I'll also explain below in my own detailed way, hoping that this becomes easy for anyone who follows my posts and wants to know how I do it😁

• Website for the Gradient Text :

PATORJK.COM

• Detailed process of how I use customised gradient text on Tumblr :

( Pay attention to the colors that I have used in the steps as well as the screenshots to understand better. The markings on the photos are to make it easier to spot what I'm talking about. )

.

1. Create a post on Tumblr by writing the text you want to make a gradient of and save it as a draft. [Saving a draft helps you in not losing your work while doing all this 🥲]

In that draft → Go to the Settings wheel and in the Text Editor section select HTML which is required by Tumblr to read a coded* text.

* ( The colors of the Gradient text are basically coded into text on the Website I shared above. Hence, changing into the HTML type here will help Tumblr recognise that coded text and turn it into a normal Gradient colored text. )

2. You will see a coded version of the text you wrote which is encoded between <h1>...your text...</h1> for my text in the photo below. You can toggle between HTML & Preview to see the coded and uncoded(normal) version of the text. Now, COPY the normal version of the text from the Preview mode that you want to turn into gradient.

3. Visit the WEBSITE in the link I've shared above.

.

A: is the part where you PASTE the text you just copied and want to change into a Gradient.

B: is the NUMBER OF COLORS you want to use in the gradient.

C: is the part where you put the COLOR CODES (HEX/RGB) or just swipe to get the desired color from the color wheel.

4. I pasted the TEXT in the text box and made the changes that I need to do to get the gradient. I used 4 colors and put the Hex codes for the Teal and Beige colors. Once you're done click on "Generate Color Faded Text".

{There are more options like Horizontal Gradient/Vertical Gradient/One color for each line/Horizontal Gradient for each line/Random color generator,etc. You can also save a color combination you made by clicking on Save Local. But these are options which you can use after you've gotten used to it.}

5. On the next page you'll get to see a PREVIEW of the text and the coded text in the box below. Click on SELECT ALL and COPY the coded text.

[ If you want to make any changes you can go back by clicking on "Create a new fade" and you will be taken back to edit the current gradient. Nothing will be reset, even if it says New Fade you can make changes to the existing one by going back. ]

6. Go to the draft and DELETE the existing text to avoid mixing the coded text with it. Stay on the HTML mode rather than Preview mode.

PASTE the coded text while you're on the HTML mode of the draft (the codes are really long depending on the number of colors and length of the text)

After pasting in HTML mode click on PREVIEW and you're DONE ! Ta - Da !! Just like magic 😜✨

Other than that you can edit the text style after pasting here into the basic styles provided by Tumblr — bold, italic, Chat, Intended, etc. Also this gradient doesn't work for fonts outside from Tumblr but you can use just 1 custom color for fonts like that.

Final Result : How to make Gradient Text on Tumblr ?

I hope this was helpful😭 I love editing the text and making it match my dividers, so this is magic for me. You can DM me if you need any more help understanding this.

GRADIENT TEXT TUTORIAL <3

Hi hi!

So tumblr doesn’t have a gradient text option, but it is still accessible for users to get onto tumblr. People say you can only do this on computer but that’s a lie. It’s accessible to mobile users as well (such as me) and probably works the same way.

Link: stuffbydavid

Reminder:: It’s not limited to mobile userssss, you can do this off of your phone if you do not own or write on a computer.

1st: put the text you want to turn gradient in this box!

2nd: Change the color of the text to the color(s) you want. There’s several options, choose whichever one you want.

4th: is optional to change the text to italics or bold but for me it doesn’t work once I paste it in here so I normally just do it myself.

Finally step before we move on is to copy the code at the bottom. Do NOT copy the first one it will not work, only the second one.

Now from here, we’re going to go onto the tumblr website (tumblr.com) and click “create” or just the pencil and click the settings button of the post and go to text editor and change “rich text” to “HTML”.

Once you do that, scroll all the way down and paste the code. After you’ve done that, save the post to your drafts and edit the text in the app, and you’re done!

i'm sure there's several of these already out there, but here's a rundown of how i make the gradient text for my gifset captions! (example)

𖥻 tutorial below cut <3 | screenshots + bold/italic/small/color text included for my fellow adhders who can't sit through long blocks of text

OHH OKAY THE GRADIENT TEXT, here’s a tutorial under the cut ^^

deep in my heart, i have to believe there's still hope for a happy ending for them. my shaylas....my genda fluids..... :o(

★Once the blog mod was the one asking for gradient text tutorial, now the blog mod must carry on the legacy…./silly

♪It’s this website!!

♪There’s also this post with a link to another website based on it with a few extra features, but the og works fine for most purposes :D

⇒To actually use it, you’re gonna have to go into the HTML editor of tumblr and then paste the HTML code you copied from the website into there!! (Screenshots taken on mobile, apologies.)

★Then just save it as a draft and you can go back to editing in the normal post editor!! The color won’t be removed unless you manually do it, so you can change text size and everything however you want!

—

If only all forsaken characters could have a happy ending….like a personal wish here is, and sorry to everybody who dislikes ichance, doublefedora or frozendebt, happy ending royal flush (Chance/Mafioso/iTrapped) when

But also Noob666 happy ending when

Azuretime happy ending when

Janejohn happy ending whenn

Come on forsaken spread some joy ‘round here the spectre will survive a day or two without a thanksgiving dinner’s worth of fear to eat!!! Not to mention having your loved one back won’t stop you from being scared when they kill all your friends off one by one (haha) and leave you for last.

Wait, actually, imagine the suffering from both partners when, even though their love was left for last, they still have to die/kill the other anyway because that’s how the game works?

Personal hc but if any of the killers leave a survivor alive ON PURPOSE then The Spectre’s gonna make sure to punish them for that somehow, so the best (or possibly only) option would really be to kill anyway. It does this to make sure the killers don’t decide to go on strike for some reason some day (say John Doe somehow gets past all the safety measures to stop him from loving Jane and knowing she’s there brings him enough peace to not want to kill anymore, although blog mod is aware it wouldn’t just be that easy) That’d cause more fear over time, right??

Hello Siren,

Thank you for the compliment. Yes, I can teach you. Just follow a tip from Auntie here: do it because you genuinely like the aesthetic. The time you spend writing the post is sometimes the same as editing it, and in my experience, this won't necessarily translate into more likes or reblogs. So, do it because you think it's beautiful.

As comical as it sounds, I won't be using HTML in this post because using the codes could cause problems. I've seen some tutorials, but I just really learned when I searched on my own.. I also do all my editings on my notebook. So, here's everything I use:

Websites I use for editing:

HTML Code Editor: While you're creating your HTML, you can simultaneously see if it's working

BBcode & HTML Text Colorizer: This is where you'll create the gradient

Browserling: I use this site to make the gradient code compatible for Tumblr

Aesthetic Symbols: this is for that cute symbols

Piliapp: more copy/paste symbols

Fontes e Letras: copy/paste fonts

Canva: This is where I create some of my designs. I also use Photoshop

Deviantart: a lot of material for Photoshop like templates, PSDs and Renders (PNG image with a good resolution), you can see the ones I use the most in my sources

@animatedglittergraphics-n-more: dividers

@saradika: dividers

@engrampixel: cute material

Color Hunt: if you don't have a color pallete in mind, here you can find a lot of options

Adobe Color: if you want to create your own HTML color palette this site can help

DaFont: where I download my fonts, the ones I use the most are: Betterfly, Arcadepix, Starborn, Lemon Milk, Cursive Sans and BubbleGum

EmojiTerra: as I use tumblr on my notebook, this is where I get my emojis

HTML Text Editing

Important:

Go use the HTML Code Editor in this part and your life will be way easier.

Some things I do right here in the tumblr editor, like putting the images and different fonts like Lucille.

All HTML code starts with < > and ends with , that is, when you start a paragraph you will write <p> and when you finish you will write </p> (HTML Code Editor ends your coding automatically)

I'm teaching all this because if you want to make gradients in your entire text and not just in the title, you'll need to know about html

To start your HTML you will need to go to the gear that appears on the right side when you are writing your post, go to the bottom until you find the Text Editor and switch to HTML.

The Codes

<p> start a paragraph </p>

<br> to make a space between text less than a paragraph (good to use in indented text) you don't need to put </br>

<b> make the text bold </b>

<i> leave the text in italics</i>

<strike> leave the text crossed out </strike>

<small> make the text small like this </small>

<h1> make the text large like this </h1>

<h2> make the text large like this </h2>

<ul> Create unordered list (dotted) </ul>

<ol>Create lists with order (numeric) </ol>

*instead of making paragraphs you will create new items in the list using the code <li> </li>

<blockquote class="npf_indented"> make the text indented </blockquote>

<span style="color: #HTML"> Code to color your texts, pay attention that it uses (") instead of (') and doesn't use (;) </span>

Tutorial on creating invisible spaces, just like I use to do the navigation, if I put it here everything bugs. PT-BR

<a href="URL">Link Text</a>: Creates a hyperlink

Making your Gradient

Go to BBCode and HTML already with your HTML text and colors in hand. Write or copy your text in the box, choose the gradient type (I use middle) and select your colors (from one to three different colors)

Now copy the text in the "HTML code for this text: (To use on your website)" box and go to the Browseling, you will replace the (') to (") and the (;) for nothing

Copy and paste your new code direct in your tumblr post editor or in the HTML Code Editor. Success!!

I think that's all. Kisses from the Sea! 🐚