I want to make my heading text in my webpage like a gold I don' want a color like this #ffd700 I want the same look and feel like any graphics designer can make gold effect in Photoshop. Here I am attaching an example how I want.

I want to make my heading text in my webpage like a gold I don' want a color like this #ffd700 I want the same look and feel like any graphics designer can make gold effect in Photoshop. Here I am attaching an example how I want.

• javascript
• html
• css

• 1 You know that Photoshop and CSS are two completely different things? Such kind of effects will not be possible with CSS. – Uwe Allner Commented Apr 15, 2015 at 7:19
• What did you try so far? – progsource Commented Apr 15, 2015 at 7:20
• @UweAllner yes I know both are different as I think it is possible somehow in CSS3. – Developer_world Commented Apr 15, 2015 at 7:24
• Almost valid question. But, it is ambiguous, because every designer/man imagines and does things different. So, please provide some image that shows what exactly do you mean by gold text. Ie. someone imagines "outline lens", someone imagines gradient from top to bottom... – kravemir Commented Apr 15, 2015 at 7:46
• @Miro I have updated my question. Thanks for notify me. – Developer_world Commented Apr 15, 2015 at 7:51

6 Answers 6

You can use svg to get effect

Online gradient generator for svg - http://10k.aneventapart.com/1/Uploads/319/

svg {
  text-shadow: -1px 0px 1px rgb(97, 100, 5);
}

<svg width="550" height="50" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad2" y2="1" x2="1" id="g" x1="1" y1="0.1433">
      <stop stop-color="rgb(255, 213, 127)" offset="0" />
      <stop stop-color="rgb(179, 149, 0)" offset="0.4817" />
      <stop stop-color="rgb(179, 149, 0)" offset="1" />
    </linearGradient>
  </defs>
  <text font-family="arial" font-size="40" id="svg_1" y="45" x="288" fill="url(#grad2)" font-weight="bold">
    <tspan x="10" y="45">JANDUS TECHNOLOGIES</tspan>
  </text>
</svg>

I know you want to use CSS3 but as you mentioned HTML5 I'd like to post a canvas alternative here. You'll get better browser support if you use a canvas element. The canvas 2D API has a method called createLinearGradient to apply a color gradient to a text by using different color stops:

var c = document.getElementById("stage");
var ctx = c.getContext("2d");

ctx.font = "30px Arial";
/* Color gradient */
var gradient = ctx.createLinearGradient(0, 30, 0, 10);
gradient.addColorStop("0", "#a68841");
gradient.addColorStop("0.5", "#5a4917");
gradient.addColorStop("0.6", "#836A28");
gradient.addColorStop("1.0", "#E9D07C");
/* Text shadow */
ctx.shadowColor = "rgba(0, 0, 0, 0.6)";
ctx.shadowOffsetX = 1; 
ctx.shadowOffsetY = 1; 
ctx.shadowBlur = 0;
ctx.fillStyle = gradient;
ctx.fillText("JANDUS TECHNOLOGIES", 0, 30);

Demo

You can also easily apply other effects such as text-shadows.

I've made an example using gradient and shadow. Here's HTML code:

<div class="block">
  <p class="golden-base golden3">Golden Text</p>
  <p class="golden-base golden1">Using Only CSS</p>
  <p class="golden-base golden2">NO JavaScript!</p>
<div>

Here's CSS:

.block {
  padding: 1em;
  text-align: center;
  font-family: sans;
  font-size: 2em;
}
.golden-base {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight:bold;
  -webkit-margin-before: 0.3em; 
  -webkit-margin-after: 0.2em;
}
.golden1 {
  background-image: -webkit-linear-gradient(#FFF65C, #3A2C00);
  text-shadow: -0.02em -0.03em 0.005em rgba(255, 223, 0, 0.60);
}
.golden2 {
  background-image: -webkit-linear-gradient(#E8D800, #E0CF00 52%, #A86800 55%, #A86800 );
  text-shadow: -0.02em -0.03em 0.005em rgba(255, 255, 0, 0.56);
}
.golden3 {
  background-image: -webkit-linear-gradient(#FFF65C 45%, #9A8000 75%);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.09),
    -1px -1px 0 rgba(255, 220, 0, 0.670);
  font-size:2em;
}

It looks like this:

I'm not a designer. So it's hard for me to adjust colors for your needs. However, you may test it and adjust here @ codepen - link

Disclaimer: I have tested it only with Google Chrome. To make it working with different browsers you have to port -webkit-tricks-..., if possible.

Edit based on comments, and more gradient effects.

Disclaimer

This is only available (at present) in webkit browsers

You could use the

 -webkit-background-clip

property to get your desired outcome.

A sample would be:

#wrap {
  width: 100%;
}
.gradient {
  font-size: 64px;
  background: linear-gradient(#00AC97 50%, #E4CDA4 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div id="wrap">
  <span class="gradient">Cross browser? Not yet...</span>
</div>

In order for this to 'work' in a more cross browser way, I (for once) would have to suggest using an image for this one :(

You can try this for css text gold gradient:

background: #FECA00;
background: -webkit-linear-gradient(to bottom left, #FECA00 38%, #D07800 74%, #FF9300 91%);
background: -moz-linear-gradient(to bottom left, #FECA00 38%, #D07800 74%, #FF9300 91%);
background: linear-gradient(to bottom left, #FECA00 38%, #D07800 74%, #FF9300 91%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

Result:

or if you wanna explore another orientation you can check in css text gradient generator

Use text-shadow property in css3 to get the gold effect you need. Refer http://css3gen.com/text-shadow/ for the best result.