Share this page 

Design a logo with CSS Tag(s): HTML/CSS


While you can design your logo with a JPG or PNG file with an on-line tool, the CSS approach a very lightweight and it is easy to customize.

Version 1

Real's HowTo 

<style>
.logo1 {
  margin:.25em;
  font-size:1.5em;
  padding:.1em .5em .2em .5em;
  color:white;

  background: rgb(77,144,254);
  background: -moz-linear-gradient(rgba(77,144,254,.8), rgba(71,135,237,1));
  background: -ms-linear-gradient(rgba(77,144,254,.8), rgba(71,135,237,1));
  background: -o-linear-gradient(rgba(77,144,254,.8), rgba(71,135,237,1));
  background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(77,144,254,.8)), to(rgba(71,135,237,1)));
  background: -webkit-linear-gradient(rgba(77,144,254,.8), rgba(71,135,237,1));
  background: linear-gradient(rgba(77,144,254,.8), rgba(71,135,237,1));

  -webkit-border-radius: 1em;
  border-radius: 1em;
  -webkit-box-shadow: .1em .1em .5em rgba(0,0,0, 0.4);
  box-shadow: .1em .1em .5em rgba(0,0,0, 0.4);

  text-shadow:  0 2px 2px rgba(0,0,0, 0.4);
}
</style>

<p/>
<span class="logo1">Real's HowTo</span>

Version 2

Real'sHowTo 

<style>
.logo2a {
  display: inline-block;
  position: relative;
  padding: 0 0.25em 0.7em 0.25em;
  text-decoration:none;

  background: #2ab0ed;
  background: -moz-radial-gradient(ellipse,#bfe8f9, #2ab0ed 75%);
  background: -ms-radial-gradient(ellipse,#bfe8f9, #2ab0ed 75%);
  background: -o-radial-gradient(ellipse,#bfe8f9, #2ab0ed 75%);
  background: -webkit-radial-gradient(ellipse, #bfe8f9, #2ab0ed 75%);
  background: radial-gradient(ellipse,#bfe8f9, #2ab0ed 75%);


  border:3px solid #f4f4f4;

  -webkit-border-radius: 0.5em;
  border-radius: 0.5em;
  -webkit-box-shadow: .1em .1em .5em rgba(0,0,0, 0.4);
  box-shadow: .1em .1em .5em rgba(0,0,0, 0.4);

  color: #fff;
  text-shadow:  0 2px 2px rgba(0,0,0, 0.4);
  font-size: 1.5em;
  font-weight:bold;
  line-height: 1.3;
  text-align:center;
}
.logo2b {
  position:absolute;
  font-size:66%; left:0.4em; top:1.5em;
  letter-spacing:0.2em;
}
</style>

<p/>
<span class="logo2a">Real's<span class="logo2b">HowTo</span></span>

Version 3

Real'sHowTo 

<style>
.logo3a {
  display:inline-block;
  position:relative;
  font-family: "Courier New", Courier, monospace;

  font-size:2em;
  line-height:1;
  font-weight:bold;

  color:rgba(0,0,0,.2);

  text-shadow:0 0 .5em rgba(255,255,255,1);
  text-decoration:none; /* remove <a> decoration */

}
.logo3b {
  position:absolute;
  left:1.25em;
  bottom:.10em;

  font-size:50%;
  letter-spacing:.3em;
  text-shadow:2px 2px 2px rgba(255,255,255,1);
  color:rgba(0,0,0,.8);
}
</style>
<p/>
<span class="logo3a">Real's<span class="logo3b">HowTo</span></span>

Version 4

Real'sHowTo 

<style>
.logo4a {
  display: inline-block;
  position: relative;
  margin:.25em;
  padding: 0 0.25em 0.7em 0.25em;
  text-decoration:none;

  background: rgb(77,144,254);
  background: -moz-linear-gradient(rgba(77,144,254,.8), rgba(71,135,237,1));
  background: -ms-linear-gradient(rgba(77,144,254,.8), rgba(71,135,237,1));
  background: -o-linear-gradient(rgba(77,144,254,.8), rgba(71,135,237,1));
  background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(77,144,254,.8)), to(rgba(71,135,237,1)));
  background: -webkit-linear-gradient(rgba(77,144,254,.8), rgba(71,135,237,1));
  background: linear-gradient(rgba(77,144,254,.8), rgba(71,135,237,1));

  -webkit-border-radius: 50% / 7px;
  border-radius: 50% / 7px;

  -webkit-box-shadow: 0 .25em .25em -.25em rgba(0,0,0, 0.4);
  box-shadow: 0 .25em .25em -.25em rgba(0,0,0, 0.4);

  color: #fff;
  text-shadow:  0 2px 2px rgba(0,0,0, 0.4);
  font-size: 2em;
  font-weight:bold;
  line-height: 1.3;
}
.logo4b {
  position:absolute;
  font-size:66%; left:0.4em; top:1.5em;
  letter-spacing:0.2em;
}
</style>
<p/>
<span class="logo4a">Real's<span class="logo4b">HowTo</span></span>

Inspired by http://www.jspwiki.org/wiki/JSPWiki Logo Samples 2012

mail_outline
Send comment, question or suggestion to howto@rgagnon.com