Make your display name on your profile stand out

<style>
@import url("https://fonts.googleapis.com/css?family=Creepster");

.w-40 h1{
font-family: Creepster;
font-size: 40px;
text-align: center;
background: -webkit-linear-gradient(#000000, #DDDDDD);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1px black;
}
</style>


Which will give you:


See, nothing too crazy. But lets break it down a bit for those who aren't sure what's going on.

@import url("https://fonts.googleapis.com/css?family=Creepster");
This line is what imports the font from Google. Simply replace the url with whatever the url is of your selected font and it'll be imported, but you still need to tell the element to use the font (the syntax is @import url("");. Which brings us to....

.w-40 h1{}
This is the element that nests your display name. You can think of this as "everything that falls between the curly brackets will affect only my display name".

font-family: Creepster;
Here is the first line that changes the way your display name looks. Here we are updating the font of your name to whatever the font of your choice is. Just make sure it matches the name EXACTLY or it will not work (ex. in your url your font may show as "test-font" but your font name may be "Test Font". Make sure it is the font name as it is). Besides that, you're good to go!

font-size: 40px;
text-align: center;
These two lines are for formatting and are totally optional (as is everything else in this blog from this point on...). I like my name centered above my info and a fair bit large than the default size. You can change the text-align option to right, center, left, or justify (justify attempts to make the text stretch to fit the area but is very hit-or-miss. I would stick with center then adjust the font-size property).

background: -webkit-linear-gradient(#000000, #DDDDDD);
Now we're getting to the juicy stuff. You need the two lines after this to make the effect work, but I'm splitting it up for readability. I should preface this with one thing: -webkit functionality could vary between different browsers. This snippet is optimized for chrome and I don't much care to add in the optimizations for older builds of firefox. BUT if you would like to, just google "firefox webkit css" and you should be able to find enough info on your own.
Anyway, this line is adding a color gradient to my text. It starts at #000000 and fades down to #DDDDDD. Of course, you can change this to any two colors you'd like and it will fade them top-to-bottom. If you'd like to add a THIRD color, just slap another comma, another color, and you're good to go (this would make the property:-webkit-linear-gradient(#000000, #DDDDDD, #ABC123);). The webkit properties can get a bit advanced, but I just use them the easy way. No since in complicating things. But, for more learning, you can head here.
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

I'm lumping these two together because they go hand-in-hand. Basically what is happening is the -webkit-background-clip: text; property is cutting the background down to the shape of any text in the element. Your text becomes the only thing visible in the element, however it will be one solid color instead of the gradient like we want. This is where -webkit-text-fill-color: transparent; comes in. It removes the fill color from the text and shows the pretty gradient laying underneath. Neat, right? 3 lines of CSS to make a gradient happen on your text, but it's pretty straight forward.

-webkit-text-stroke: 1px black;
The last line we'll be looking at is the stroke property. This will create the outline around the text so it looks strong against any background you choose. You can change the color from black to anything you want, and the stroke size can be increased to any size you want. It's a very easy to read property. Play with it a bit and see what looks best on your page.

And that wraps it up! With this info you should be able to stylize your display name on your profile and make it look a bit better than the default.

Feel free to comment below letting me know you got this working on your page so I can check it out, and if you have any questions please feel free to ask!