How to style a letter with different colors

Question

I want to use a letter which hides the overflows of colors. Want something like google icon but completely built with CSS. Is there a solution to hide the overflow of that red rectangle? Want to rebuilt the Google logo.

#letter {
 background: white;
 font-family: "Product Sans", Arial, sans-serif;
 color: green;
 font-size: 200px;
 font-weight: 900;
 opacity: 0.1;
 position: relative;
 margin-top: 0px;
 margin-left: 0px;
 overflow: hidden;

}

#circle1 {
 width: 30px;
 height: 100px;
 background: red;
 position: absolute;
 top: 30px;
 left: 80px;
}

      <p id="letter">G
      <div id="circle1"></div>http://stackoverflow.com/questions/ask#

This is pretty tough, you could try out `-webkit-background-clip: text;` for effects along these lines, though obviously that's not really viable in production yet as it's webkit only. — DBS, Oct 06 '16 at 13:01
Please can you clarify what the end goal is - you want to stop the red block coming outside the letter paragraph? Or you want a circle behind the letter? — Pete, Oct 06 '16 at 13:14
Why not use an inline SVG like this ready made perfect Google logo https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svgone — web-tiki, Oct 06 '16 at 13:18

score 1 · Answer 1 · answered Oct 06 '16 at 13:07

Using CSS gradients might get you the desired effect, however it's not widely supported because of the -webkit-background-clip: text;

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(top, #cc0223 28%, #016b14 29%, #016b14 44%, #016b14 63%, #3b01c1 64%, #3b01c1 85%, #febf01 85%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<h1>E</h1>

score 1 · Answer 2 · answered Oct 06 '16 at 17:17

In the base, play with border colors to get some similar to google logo. (See the second base to see it more easily)

Over this, set a G with a blend mode that will hide the overflow.

This will not work in Ie/Edge since the blend mode isn't supported.

.base {
    height: 0px;
  width: 0px;
  border-width: 100px 200px;
  border-style: solid;
  border-top-color: red;
  border-left-color: yellow;
  border-right-color: blue;
  border-bottom-color: green;
  position: relative;
}

.letter {
  font-size: 150px;
  line-height: 190px;
  position: absolute;
  left: -199px;
  top: -99px;
  width: 398px;
  height: 198px;
  background-color: white;  
  text-align: center;
  mix-blend-mode: lighten;
}

<div class="base">
  <div class="letter">G</div>
</div>
<div class="base"></div>

score 0 · Answer 3 · answered Oct 06 '16 at 13:11

0

h1 {
  font-size: 100px;
  background: -webkit-linear-gradient(top, red 28%, green 29%, green 44%, green 63%, orange 64%, orange 85%, orange 85%, blue 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<h1>G</h1>

answered Oct 06 '16 at 13:11

Ganesh Putta

2,622
2
19
26

How to style a letter with different colors

3 Answers3