How to make gold effect text using CSS3

Question

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.

Answer 1

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>

Answer 2

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.

Answer 3

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.

Answer 4

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 :(

Answer 5

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

Answer 6

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