#gradient text tutorial

[what-is-love-babey-dont-hurt-me]

literally how are you doing the gradient text thing. i need to know.

✨ 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!

*EDIT: It is possible via mobile through the method of entering your account on a web browser and putting it on computer mode, then following the same process. Reportedly it is less comfortable but it works, thank you to chocokeyboard for letting me know!

[uzmacchiato]

Hi! How you doing the combination in the titles? Can you do a tutorial please! Thanks!

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

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.

Thank You❤️

[kissmyglxck]

can you do a tutorial on how do gradient text

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!

[solixiaa]

gradient text tutorial !!!

1. okay so first i use this website :: lovewich gradient text put whatever text you want to have the gradient in the 'input text' box, and then edit the colors .etc under output format make sure its under tumblr , then copy the html

2. then on tumblr, go to the post settings and under the text editor choose HTML

3. After switching the post settings to HTML, you will see two tabs. HTML, which has text codes, and preview where it'll show what the post will look like. Input the HTML code from lovewich into the HTML tab on the tumblr post.

4. switch to preview and u can adjust the text placement, sizing .etc as u please!!

hopefully this made sense...u can repeat this process as many times as you want. If there r any questions just let me know ^_^

[stellectrics]

「 Gradient Text Tutorial for Captions 」

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

websites used: color picker, text colorizer, text replacement

step #1: pick your colors (optional) when making gradient text for a caption, i usually use an image color picker to get exact hex codes! this just helps me match everything even better than i could when manually inputting colors! (this is completely optional, but i like doing it, so i thought i'd include it here!)

step #2: making your gradient now the fun begins! open the text colorizer linked above, and enter the text you want to be a gradient into the text box:

(all caps is by no means necessary! i'm just doing it to make the gradient stand out even more, since i'm going to have a decent amount of text in my caption.) after entering your text, choose the type of color effect you want using this drop-down menu! color effect is essentially the type of gradient/how many colors it uses, etc. play around with this to find the one you like best!

i'm sticking with horizontal gradient, but you can choose whichever one you like! (there's also a solid color option if you want to just use a color that isn't available in the tumblr text options.) after color effect, you can choose your colors using this section - if you did use the color picker from step one, you can just paste the hex codes into the boxes.

if not, click on the colored bars, and this hue picker will pop up:

drag your mouse around in the left box to choose your color. the bar on the right can be used to modify shade.

(these are the colors i'm using)

skip over the "additional text settings" section (these options mess with the html code and cause issues when you try to use it on tumblr) and check the preview to make sure you like how your gradient looks.

if you're having a bit of trouble seeing the gradient properly, you can scroll back up to "additional text settings" and turn on bold to see it better. just make sure you turn it back off before copying your code.

now you're ready to copy your code!

after making sure any additional text settings are returned to their default/unchecked states, scroll down and copy the HTML code (NOT the BBcode). select the text and copy it using command/ctrl + C or right click and click "copy".

step #3: replacing

the text colorizer used here is great, but it does add unneeded semicolons to the html code that mess with tumblr's settings and cause formatting problems.

open the text replacement site (linked at top), and paste the code you copied into the text box:

in the "replace this:" box, type ; (leave the "with this:" box blank)

click "replace text". skim over the new code to make sure the semicolons are gone (sometimes you've got to click "replace text" a couple of times for it to work), and then either click "copy to clipboard" or select and copy the text manually.

step #4: writing your caption now that you've got your code, open tumblr and make a new photo post. look in the top right-hand corner of your screen, and make sure "legacy editor" is turned on. if it isn't, click the toggle to turn it on.

next, you need to make sure your text editor is set to html. to do this, click the little gear in the top right corner of the new post. select "html" from the drop-down menu next to "text editor", and then close the settings. [07.27.23 update: if, like me, you're stuck using the new editor, you can still set your post type to html, and gradient text will still work. the post editor will just turn your files into code when you're editing, and you'll have to fix the spacing in between your gifs (if you're using this for a gifset caption) in the preview tab. it looks super weird and alarming at first, but it does still work with the new post editor.]

upload your gifs and then move down to the caption. open the html tab and then paste your code! once you've done that, click on the preview tab to check how it looks.

my gradient looks pretty good, but i'm going to bold the text to make it more visible. here's how to use html to do that:

<strong>code goes here</strong>

here is a list of other html codes you can use to stylize your text! (they use <;b> for bold text, this is another way to do it, either method works fine!)

if you want to have another line of text under/above your code you need to add <br> at the end of the top line to create a line break (just pressing enter won't work). here's an example of how to format that:

text text text<br> text text text&lt;br> text text text

write the rest of your caption, and then you're done! here's my end result and my final code:

i hope this was helpful! feel free to send me an ask if you have any questions! happy giffing <3

[kuulcolors]

Hi !! Sorry for being unclear before ^^' .. I meant something like this !

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

If you want a video tutorial, I have made a video here.

1 — Go to this website

2 — You’ll see this, click on the color buttons to change them to whatever you like

3 — then, write whatever text in the first box

4 — now, click the ‘run’ button and code will appear in the second box

5 — ensure you haven’t written anything after where you want your gradient text to be. copy the code and now open whatever post you desire, click the cog button

6 — scroll down and you’ll see the ‘text editor’, click the ‘rich text’ menu and click ‘html’

7 — you’ll see a bunch of code, but go to a new line and paste the code that you copied earlier.

8 — go back to the text editor menu and click ‘rich text’, you’ll see the post normally again and your result.

Result: Example

— You are free to bold the text, make it italic, bigger, smaller, whatever you want!

[goodforsakentakes]

two things 1. i DESPERATELY need to know how the fuck you got rainbow text on your pinned. that's absolutely gorgeous!! 2. seeing as i'm the strongest noob666 soldier (source: trust me bro), i feel the need to add on to the one noob666 ask (the one from dec. 30 iirc). i don't really have anything like, intelligent or interesting to add, just wanna say FUCKKKK THEY'RE SO RIGHT....

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??

The Spectre could invest in fan service through atleast temporary happy endings and it’d bring it more food over time….

[astrojulia]

Hi!! I saw your blog and it's beautiful! I'd like to ask if you could share some tips about editing posts, specifically changing the font color and doing that cool effect where it has more than one color on the same font ☺ if you're not comfortable teaching that's okay too! Have a good night

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! 🐚