GRADIENT BIOS!!! WOOOHOOO!!!

[uta]

YOU!
YEAH, YOU!!!
WANNA KNOW THE SECRET TO GETTING THE POWER OF THE. . .

funky gradient bios?! that a lot of people seem to have?!
...Or not, and you're just curious about what the heck this guide is about.

WELL. ANYWAYS! YOU'RE IN LUCK! Because I'm giving you the most simple tutorial known to man, your great-great-great grandmother could figure it out!

Well. . . if you have no idea what the heck I'm talking about, here's an example of the current gradient bio I have for my little goober Hae.



COOL, RIGHT?!
(Not really, but anyways-)
​

---

STEP UNO: Find an RGB website! https://rgb.birdflop.com works best for this.

Now you're gonna see a screen that looks like this! Don't fret, cause it's pretty simple to understand! Or do fret, I don't really know.



Ignore all the checkboxes at the bottom, don't really touch anything (unless you want to of course) but you can also change the number of colors to go through. But this is really for two colors! Eh, do whatever.

STEP DOS: PICK YO COLORS!

See those funky Hex Color #1 and #2s? You can change them to ANY color you'd like. Want pink to green? Go pink to green! But for this, I'm just gonna use the preset colors that are already there.



STEP TRES: PUT A WORD!

I recommend using a short word in capital letters, like "TESTY" for a short gradient or "SIMPLE" if you want a longer gradient. It's capitalized to differentiate the word you put from the actual hex codes. OR you can just spam slashes (///////). You'll see why!




STEP QUATRO: IT'S COPYING TIME!

There's gonna be a ton of gibberish here! What you wanna do is, find the hex codes and leave out the actual text you put.



For example, I see incomprehensible characters: &#084cfbT&#3176fcE&#5ba0fcS&#84c9fdT&#adf3fdY
But, if you separate them. . .

&#084cfb T &#3176fc E &#5ba0fc S &#84c9fd T &#adf3fd Y

You'll get your hex codes! NOW. DON'T JUMBLE THEM UP! You wanna keep them in that same order.

STEP CINCO: GET OUT YA NOTEPAD!

If you don't have a notepad for this, GET ONE. Or something! You're gonna take those hex codes and place them in that same order at any point in your description!



If you keep them in the same order, it'll look like a gradient! And if you did this right, it'll look like the image I showed allllllllll the way at the top of the page!

This was just a little thing I did for fun, so uh... do whatever! Have fun with your funky gradients! <3

 

[长卂丅卂尺卂 尸卄丫㔿]

FKN W!!!

 

[SkyFantasyWorld]

finally I can do gradient text

 

[DivingBlues]

Finally!! Thank you for this it’s amazing !!

 

[_BritishAutism_]

Been tryna figure this out for months, thank you, didn't realize how simple it was!

 

[Hamburger]

If I get back into doing SRP I’ll look at this

 

[长卂丅卂尺卂 尸卄丫㔿]

YOU!
YEAH, YOU!!!
WANNA KNOW THE SECRET TO GETTING THE POWER OF THE. . .

funky gradient bios?! that a lot of people seem to have?!
...Or not, and you're just curious about what the heck this guide is about.

WELL. ANYWAYS! YOU'RE IN LUCK! Because I'm giving you the most simple tutorial known to man, your great-great-great grandmother could figure it out!

Well. . . if you have no idea what the heck I'm talking about, here's an example of the current gradient bio I have for my little goober Hae.

View attachment 49217

COOL, RIGHT?!
(Not really, but anyways-)
​

---

STEP UNO: Find an RGB website! https://rgb.birdflop.com works best for this.

Now you're gonna see a screen that looks like this! Don't fret, cause it's pretty simple to understand! Or do fret, I don't really know.

View attachment 49218

Ignore all the checkboxes at the bottom, don't really touch anything (unless you want to of course) but you can also change the number of colors to go through. But this is really for two colors! Eh, do whatever.

STEP DOS: PICK YO COLORS!

See those funky Hex Color #1 and #2s? You can change them to ANY color you'd like. Want pink to green? Go pink to green! But for this, I'm just gonna use the preset colors that are already there.

View attachment 49219

STEP TRES: PUT A WORD!

I recommend using a short word in capital letters, like "TESTY" for a short gradient or "SIMPLE" if you want a longer gradient. It's capitalized to differentiate the word you put from the actual hex codes.


View attachment 49220

STEP QUATRO: IT'S COPYING TIME!

There's gonna be a ton of gibberish here! What you wanna do is, find the hex codes and leave out the actual text you put.

View attachment 49221

For example, I see incomprehensible characters: &#084cfbT&#3176fcE&#5ba0fcS&#84c9fdT&#adf3fdY
But, if you separate them. . .

&#084cfb T &#3176fc E &#5ba0fc S &#84c9fd T &#adf3fd Y

You'll get your hex codes! NOW. DON'T JUMBLE THEM UP! You wanna keep them in that same order.

STEP CINCO: GET OUT YA NOTEPAD!

If you don't have a notepad for this, GET ONE. Or something! You're gonna take those hex codes and place them in that same order at any point in your description!

View attachment 49222

If you keep them in the same order, it'll look like a gradient! And if you did this right, it'll look like the image I showed allllllllll the way at the top of the page!

This was just a little thing I did for fun, so uh... do whatever! Have fun with your funky gradients! <3

can you do it for me desc :>>

 

[etsu]

i was actually rlly curious as to how ppl did this its so cute

 

[uta]

UPDATE: i found a much easier way to differentiate the text! i have edited it on the original tutorial

 

[coria]

w :3

 

[Wrath ⛥]

holy shit people figured out my thing

 

[uta]

holy shit people figured out my thing

:)

 

[Classicalist]

Not me whos tried to do it manually before and horrifically fail

 

[soratheonly]

Another way to do this you can do /setdesc and put in your blank description, and at the start of every sentence put the next line of gradient
Like so

1. Make ur desc naked, put it on ur character by itself

2. count how many lines, aka every start of a sentence
3. go to https://rgb.birdflop.com/ and use a non number or letter key in the 'message' part (Personally I use >)
4. Type as many of those non number or letter keys as there are lines in the desc, put spaces to avoid any confusion
5. At the start of every line in the desc, add the color code! (I used notes app to help me with this)
EXAMPLE BLANK DESC


EXAMPLE GRADIENT

 

[WhisperTheFallen]

LETTSSS GOOOOOOO THE GUIDE IVE BEEN LOOKONG FORR RAHHHH