#gradient tutorial

[adornedwithlight]

💫 HTML for pretty colors tutorial 💫

Hello sweet beans! Since my last tutorials have been yeeted into oblivion with deactivating my previous blog @/benkeibear I figured I repost them onto here! (Mind you, my old blogs are ahead)

I'm lowkey shocked to see blogs gatekeeping this knowledge but yeah. Make your blog pretty! Match your text to dividers or just have it as colorful as you'd like!

First of all, you can not do this on the mobile app! You need to either use a laptop or your phone / tablet's internet browser (in my case safari)

You start by logging into your account and either you make a post or you edit a post. I recommend making the post on the app first because editing is certainly faster & easier!

This is our starting point! For the fancy fonts you can use messletters

1. I will now log into tumblr on my web browser and click on "edit this post".

2. You then have to click on the little gear icon in the top right corner to change the settings on your post.

3. There you have to click on "rich text" to change it to "HTML"

Your post should now look like this:

A quick rundown on html.

You always start with a letter or code in brackets. to end what you're doing it's </>. The slash signals the end.

P= paragraph <p> and to end </p>

I= italics <i> and to end </i>

b= bold <b> and to end </b>

Now tumblr will automatically do this for you if you made a text bold/in italics on your mobile post but to keep this tutorial simple i left that out here. You can always edit your text in the app after! Just not the color.

And as you see, the fancy text is now in coding. But we get to that later!

To colorize your text it's easiest to just use this website as it gives you lots of options!

1. First i will be choosing the option of "solid color" and you can then put in the hex code of your desired color into the color box.

2. In the top box you will have to put the text you will color - for this tutorial it's "Testing"

3. Then you copy the box HTML code and paste it into tumblr where your word(s) are. Do not remove the <p> and </p> in front and after your word/ sentence!

4. For the sake of this tutorial I marked the html code for colors in pink and the words in blue

Your code will now look like this:

For the gradient you can simply choose horizontal gradient or three colored gradient on the website above and copy/paste the html text.

Mind you that every single letter will get its own color code now so the word gradient suddenly looks very long in html.

If you save the post it will now look like this!

Important to know is that you can color the fancy text only solid as the website can not color it as it is and putting the letter codes in the box above does not work either.

To color the fancy letters you simply copy the color code instead of the whole text - which looks like this:

Don't forget to add </span> behind the word/the codes you're coloring to signal that this is where the color stops! If you forget to add it, nothing will be colored.

If you decide you still want to have the fancy lettering in multiple colors you have to color letter code by letter code manually like this:

(I made a very poor choice on 2 different greens but oh well)

If you'd like to change your text, you can always do that on the mobile app like you usually would. You just can't change the color unless it's into a default color. But you can still change the size or make it bold for example.

Anyhoot, this is the whole magic behind html. It's a lot and might be very complicated at first but you will eventually get the hang of it! Took me weeks and hours until someone sat me down and went through it step by step.

If you have any questions or something doesn't work as you thought it would please don't hesitate to reach out - I'm always happy to help!

[peytonsawyers]

This quick tutorial will go over how to make gradients, from simple gradients to multicolor ones.

give this tutorial a like/reblog if it helped you out

end result & tutorial under the cut

if questions should arise, feel free to send a message!

Chapters:

how to make a basic gradient

adding colors with brushes

softening & adjustments

What you´ll need:

any version of photoshop (I use CS6, mine is in german because I bought it years ago in germany) 

very basic photoshop knowledge 

i.  how to make a basic gradient

Open a new document in your desired size. 

There are several ways to make gradients. I always use the new fill layer option, right next to the new layer or new group buttons on the right side.

Click on it and select the second option.

Adjust the angle however you wish, and then click on the gradient to bring up the next window

Select any colors you want by clicking on the little droppers highlighted above. I used #ff27f2 on the left and #d58dfa on the right. Once you´re done click OK until your new gradient is on your document.

ii. add colors with brushes  

add a new layer & select a big brush with no hardness and low opacity.

select any color to paint with, I´ll be using  #e50051 &  #770dfa & plain white. Start painting on that new layer in slow strokes. You can add as many colors as you want. Mine now looks like this:

Now we merge our layers by selecting them, then righ click and selecting merge 

iii. softening & adjustments 

Go to filters -> blur > motion blur 

Depending on the gradient you´ll have to select different variables, but for this one I used the numbers below:

Sometimes I add Gaussian Blur too to blend it even more, but didn´t do that for this gradient. 

Now for the adjustments I only added a brightness and vibrance layer. This is the finished gradient:

[leonw4nter]

I hope you don’t mind me asking but how do you do the gradient colors for your titles they’re so pretty

HELLOOOO!!! No, I don't mind! Here's how I usually format my gradient titles :)

#1 - Go to the settings icon on the post and click on that. Scroll down and look for "Text Editor".

#2 - It should say "Rich Text". Click that and choose "HTML" from the choices.

#3 - Then go to this site and on a field that says "Your text here!", place your title and then set the colors you want for your text using the two things beside the field where you put your title.

#4 - Click "generate" and if you scroll down, you'll see the HTML code for your text. Click that and copy.

#5 - Go to the HTML part of your post and paste the code. Switch back to the preview part and you're free to adjust the gradient text (regular, chat, Lucille) and you're done!

I hope this was easy to understand anon! :))

[beanswithbones]

So you wanna make gradient text?

this was originally made just to help a friend but she suggested I post this publicly to help bcs the other tutorials out there aren't very straight forward. with that said pls ignore typos:

↓↓ Site Link ↓↓

↓↓ Site Link ↓↓

Note: you can still continue typing in the preview

Hope some peeps find this helpful

[kiwinatorwaffles]

HOW I PAINT WITH GRADIENT MAPS

the post by arcanescribbles where i learned this technique! check out their works!

an even simpler version of this is to just lightly brush colors over a base color in the background and then go off of that. otherwise, i hope this can help!

a full version of my example piece here

[novy2sirius]

GRADIENT TEXT TUT

how to get ombré colored text on tumblr <3

꧞ i get a lot of dms and comments asking about how to change the color of your text to colors that tumblr doesn’t have or to an ombré text. this is how

꧞ sites you can use: the one i use // two // three

꧞ you can use your phone for this, but i prefer using the computer. just go to safari to do it instead of the app if you wanna do it on the phone

one: copy the text you want to color from your tumblr post then paste it into the websites text box

two: change the color of the text to whatever color you want. with the website i use it allows you to pick presets or you can also customize your own then click generate

three: click the “select all” button and copy the code

four: go over to tumblr and click the edit button on your post

five: click the settings button and change the text editor to "html" then find the html section at the top and click on it

six: paste the code from the color fader website in the html where you want it to go (i paste it at the top and just edit it on my phone by holding text down and moving it)

[amberluvsbugs]

Question: From your progress shots you seem to do everything in greyscale then add color. How do you do that? Is it a layer effect you apply so the colors take their place or something else? (gradient maps also confuse me so i have no idea if thats what your doing)

Sorry for the very odd question, its just that your art is so wonderful and amazing to look at that i was curious how/why you do the greyscale to color way.

Also thank you!!

[astrolavas]

Random question, but how did you do the rainbow thing in your pinned post? Is it from something you buy on Tumblr?

the gradient, yes!!! no, it's completely free.

so, i don't remember where exactly i got the instructions as to how to do it, but this is basically how the word "welcome" from my pinned looks like in html:

since it's a gradient, every letter is a sliiightly different hue, but i remember there was a website where you could basically write any word/sentence that you'd like gradiented, choose the starting and ending colors, and it'd automatically give you the html code for the gradiented text. i think it was this one?

and that's what you get!

you just gotta copy the code, start editing your post, make it so you're editing it as html, paste the code in, and it SHOULD work. hopefully!

[kaiserouo]

(prev)

i colored that

[zaldrizotl]

GRADIENT TEXT TUTORIAL

HOW TO GET OMBRÉ STYLED TEXT ON TUMBLR

𝜗℘ I got a request on TikTok asking to do a tutorial on gradient text — tumblr doesn’t have an in-app option on doing gradient texts. This is how.

𝜗℘ Sites you can use: image color picker / stuffbydavid (gradient text).

𝜗℘ People say that you have to use a computer for this, which isn’t true. I am able to make gradient text on my phone, but you can use a computer if you want.

color picking from an image is optional, but highly recommended.

one: put the text you want to color for your tumblr post.

two: change the color of the text to whatever color you want. there are several options on how you want it. pick whatever option you want. the text will automatically generate for you.

three: copy the entire code then press “copy”.

four: go over to tumblr (website, not the app) and click “edit post” (the pencil) or create a new post.

five: click the settings button and change it from “rich text” to “HTML.”

six: paste the code from the gradient text website in the HTML where you want it to go. (I paste it then just save the post to my drafts then edit the text on the app)

[adornedwithlight]

Hello sweet beans! Since my last tutorials have been yeeted into oblivion with deactivating my previous blog @/benkeibear I figured I repost them onto here!

💫 gradient line divider tutorial 💫

This tutorial uses my simple line divider tutorial as a base. Please familiarize yourself with it first since this is just additional steps!

I use various apps and sites for gradients. The apps I mainly use Canva or Gradient+ occasionally I use GradientDaze (for when I don't have specific colors in mind)

As websites I can recommend browsing through uiGradients or Webkima if you'd like animated gradients.

I'm a little oldschool and don't use photoshop but there's plenty tutorials on how to animate gradients there on YouTube!

Starting with Canva:

1. You first open your divider template. Mine is as in the previous tutorial the simple 1000x40.

2. Next you will click on the color button and choose a color like the little arrow shows

3. Then you select "Gradient" and Canva will give you a second color option. You can change both colors here or add many more if you'd like more colors. Here you can also choose what kind of gradient you want

Just play around here and continue to resize the images you saved as explained in the previous tutorial via ezgif or any other way you found for yourself.

Next we have Gradient+

This app is built pretty simple and there's not much to explain. You choose your two colors by tapping on the colored circle at the"Color A" and "Color B" and continue further down to navigate where color A starts and color B ends.

For the classic gradient you use the settings as above.

The app also offers radial and angular gradients so you can just play around with what you like!

Make the gradient big by tapping the expansion arrows and take a screenshot - then you may resize your divider.

The last app is GradientDaze

Again, a very simple app but this time you can't enter hex codes. Instead you can move 2 circles around on a little color card and find pretty gradients you like

If you found two colors you like, you can click on the little + and then on "info" to see the color names and hex codes. In the menu after clicking + you also have the option to save the gradient

Once saved you can resize your dividers.

Onto the web pages.

At uiGradients you can browse through popular gradients users have made. Once you find one you like you can use the hex codes to make a gradient divider for example in Canva or you take a screenshot and resize it.

Using Webkima for animated dividers is a little inconvenient because you need to record your screen and make a gif out of if (you can do this at ezgif where you can immediately resize your animated gradient)

On Webkima you can choose up to three colors, the direction and speed at which the colors move. Personally I haven't used this yet except for a few custom dividers since it takes quite some time for one divider.

(Left: uiGradients / Right: Webkima)

Using these apps / sites is optional and I'm sure there's plenty other options out there but these are the ones I personally use and find easy to navigate, especially canva since you can do all this in the free version.

If you have any questions or something doesn't work as you thought it would please don't hesitate to reach out - I'm always happy to help!

[fear-is-truth]

COLOUR TEXT TUTORIAL ⋆౨ৎ˚⟡˖ ࣪

go to this site ➤ follow the instructions & copy the code from the bottom box (the HTML one) ➤ open tumblr on a desktop browser ➤ create new post ➤ click the gear icon in the top-right corner to access settings ➤ scroll down and find the “text editor” option; switch it to “HTML.” ➤ paste the HTML code into the post editor ➤ scroll back up and switch between “HTML” and “preview” modes to edit the code and see how your post looks ➤ save draft :)

step-by-step pictures under cut :

final result : I am punished by love

[biscuitdolly]

how do you add the color gradient thingy to your text? i've been trying to look up tutorials but i cant find anything :(

GRADIENT TEXT TUTORIAL ꣑ৎ

hii!! i made a video cause idk how to explain!!!

here's the code website i used !!!

hopefully this makes sense!!!

enjoy jacqueline taieb in the background too lol

[knifelace]

　 KNiFELACE 　────　 a(n edit) resource blog run by @chocospresso .

𓊆　 my neospring .　 a resource blog run by my spouse . 　　 if you wish for me to delete a post / reblog , let me know .

[dqmeron]

「 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

[definitelynotshouting]

girls (gender neutral) when they decide to get a little sillay with texturing