CSS Logos and how to make one! (Tutorial)

As some of you may have seen or know CSS logos are generally quite cool with their fancy gradients and other things but how many tutorials are there to actually make them? Well this is one and I hope soon that you will all have fancy CSS logos!

First up you need to choose a letter for example the first letter of your replit name then open up a html,css and js project or make a new file called index.html and paste this code in.

<h1>(Letter Here)</h1>

Next up you need to make a new file called style.css and once you’ve done that paste in this code:

h1{
  font-size: 72px;
  background: -webkit-linear-gradient( #ff0039, #e38125);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

In the background part of the tags add the color or gradient you want and the go back to your index.html page and edit the h1 tag so it looks like this:

 <h1 class="h1">(Letter Here)</h1>

Now just change this out for another initial and change the colors for different colors like mine or type both letters in for the same color! Its all up you now. (If you do 2 different letters when you screenshot them you will need to use scratch to edit the 2 images together and give them a slant if you want too.

Share any ideas on how to improve this tutorial with me as I would love to hear the community’s thoughts on this tutorial and if I have made any mistakes please tell me so I can correct them in the future! Thanks for reading and enjoy your logos!

Was this helpful?

  • Helpful
  • Not Helpful
0 voters

Credits:
@JohnnySuriano - Half teaching me some of the code needed.

@HenryMiles3 did you mean for the second half of the tutorial to be a header?

No I just realised that after I posted it.

1 Like

@HenryMiles3 this is a cool concept I have never seen anywhere, nice job!

Thanks. I hope people like it.

Also if any of you wanted too I would love to see what you make in the comments! Thanks.

1 Like

You do not need the class="h1" part because you set up the stylesheet to affect all h1 tags.
You did this wrong imo.
You should put a period before the class name in the stylesheet and maybe name it logo.
Then, in the HTML, set the class to logo on the h1 element you want to turn into the logo.

CSS:

.logo {
  font-size: 72px;
  background: -webkit-linear-gradient( #ff0039, #e38125);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

HTML:

 <h1 class="logo">(Letter Here)</h1>
2 Likes

@joecooldoo here is a logo I made.
IMG_0222

CSS:

.logo {
  font-size: 72px;
  background: -webkit-linear-gradient( #26283b, #595b6e);
  display: inline-block;
  padding-left: 0.3em;
  padding-right: 0.3em;
  border-radius: 0.25em;;
  color: white;
}

Yes but it also works the way I originally did it.

Wow thats one of the coolest ones I’ve seen.

Really…? It’s just a solid white “T” on a gray gradient background…

Ive never seen one like it before. And to me it looks cool.

It will, but every other h1 element will be turned into the logo. And I’m sure that’s not intended behavior. I suggest you change your code so newer programmers won’t get anything unexpected and get random logos on random parts of their webpage.

4 Likes

No this is just for a separate project that is just for logos.

but what if you want to use it on a website

Yes then I would agree with your idea.