Photoshop Question posted in
The official user guide can be found here.

How to make gold effect text using CSS3 – Photoshop

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

Tags:

6

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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 🙁

    Login or Signup to reply.
  3. 0

    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:

    golden text using css only

    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.

    Login or Signup to reply.
  4. 0

    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.

    enter image description here

    Login or Signup to reply.
  5. 0

    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>
    Login or Signup to reply.
  6. 0

    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:

    enter image description here

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search