My second gradient play was inspired by this gorgeous slice of malachite, a stone I have a soft spot for since it was one of my favorites in my green-loving childhood. I was a lot looser with this one than the Tiger Eye gradient, partially because I had to be – there were too many little stripes to mimic as closely. It took a few tries before I was satisfied with the look.

Here’s the unprefixed code:
background: radial-gradient(ellipse at center, #379e70 0%,#1e6743 4%,#379e70 8%,#1e6743 11%,#379e70 15%,#379e70 17%,#1e6743 20%,#1e6743 20%,#1e6743 24%,#379e70 28%,#3b4537 30%,#3b4537 30%,#1e6743 32%,#64c6ac 37%,#379e70 41%,#64c6ac 45%,#379e70 49%,#1e6743 52%,#379e70 56%,#1e6743 59%,#6ea883 62%,#379e70 64%,#379e70 69%,#64c6ac 73%,#1e6743 75%,#379e70 79%,#379e70 85%,#64c6ac 87%,#379e70 93%,#3b4537 96%);

I used TinEye Labs’ Color Extraction Lab to get color codes again; also used again, but unmentioned in the previous installment, was a combination of Colorzilla’s Ultimate CSS Gradient Generator and the Autoprefixer Sandbox to get the code out. Something I didn’t realize last time is that Colorzilla provides a permalink to the gradient, so you can edit this gradient yourself.

Malachite photo at top by Rob Lavinsky, iRocks.com – CC BY-SA 3.0, via Wikimedia Commons

The post Gemstone Gradients: Malachite appeared first on rweber.net.

I’m going to stretch my CSS gradient design skills (well, really my eye for them) with a series of gradients inspired by gemstones. This one is from the tiger eye photo linked from a Monette Corporation article about inlaid instrument buttons, with the color codes determined by TinEye Labs’ Color Extraction Lab.

Here’s the non-prefixed code:
background: linear-gradient(to bottom, #713411 0%, #713411 3.25%, #4b3525 9.84%, #713411 16.43%, #ad5404 22.09%, #ad5404 23.5%, #ecad24 25.25%, #f9d940 26.25%, #f5e176 26.75%, #f9d940 27.5%, #ecad24 28.5%, #ad5404 30%, #ad5404 33%, #713411 36%, #713411 39%, #ad5404 43.23%, #ef910b 46.64%, #ad5404 50.05%, #713411 55.71%, #4b3525 60%, #4b3525 64%, #713411 68.89%, #ad5404 74.55%, #ad5404 75.75%, #ecad24 77.71%, #f9d940 78.71%, #f5e176 79.21%, #f9d940 79.96%, #ecad24 80.96%, #ad5404 82%, #ad5404 85%, #713411 90.03%, #4b3525 96.62%, #4b3525 100%);

I don’t expect to get to these very often but I already have a few more gemstone photos to play with.

Tiger eye photo at top by Adam Ognisty, via Wikimedia Commons.

The post Gemstone Gradients: Tiger Eye appeared first on rweber.net.