Gold Text with CSS or Image

I wanted to create some gold text for a website without using photoshop. Using a solid color is not an option because you can’t really get that gold color. I found 2 good options. The First option was pure css and the second one was css with an image. Check them out below.

PURE CSS Gold Text

Example: CSS Gold Text
Code:

.goldtextcss {
color: #D5AD6D; /*if no support for background-clip*/
background: -webkit-linear-gradient(transparent, transparent),
-webkit-linear-gradient(top, rgba(213,173,109,1) 0%, rgba(213,173,109,1) 26%, rgba(226,186,120,1) 35%, rgba(163,126,67,1) 45%, rgba(145,112,59,1) 61%, rgba(213,173,109,1) 100%);
background: -o-linear-gradient(transparent, transparent);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

CSS with Image

http://www.theblogmarket.co/create-gold-foil-text-with-css/

Example: Image Gold Text
Code:

.gold-text {
color:#c3a343;
-webkit-text-fill-color: transparent;
background: -webkit-linear-gradient(transparent, transparent),
url(http://example.com/gold-texture-image.png) repeat;
background: -o-linear-gradient(transparent, transparent);
-webkit-background-clip: text;
}
Tagged , ,