Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make gold effect text using CSS3

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. Gold text example

like image 326
Developer_world Avatar asked Apr 15 '15 07:04

Developer_world


1 Answers

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>
like image 75
Vitorino fernandes Avatar answered Oct 03 '22 18:10

Vitorino fernandes