: How to export a gradient overlay to CSS3 styles (in Photoshop CC)? I have two buttons in my .psd template. They are with a gradient overlay. Is it possible in Photoshop to export gradients

@Murray976

Posted in: #AdobePhotoshop #Cc2014 #Css #Gradient

I have two buttons in my .psd template. They are with a gradient overlay. Is it possible in Photoshop to export gradients as CSS styles?

Please, see a pictures.

Buttons with gradient:



Info of Registration button (Login is the same):



I try to use Photoshop CC built-in feature "Copy CSS", but it doesn't exports gradients. It gives it as a .png image, which is not desirable:

.Rectangle__round__corners__4__copy__17 {
background-image: url("Rectangle, round corners 4 copy 17.png");
position: absolute;
left: 906px;
top: 80px;
width: 122px;
height: 33px;
z-index: 732;
}


How to get gradient overlay as styles like these:
#Rectangle {
background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax */
}


UPD:

A little remark to the answer of Vincent (https://graphicdesign.stackexchange.com/a/39231/30315). To get a gradient from an existing element, you need to crop it (a gradient) and save it as .jpg or .png image and then import it on the site and it will return you gradient styles.

Above you can see the buttons. Here are the backgrounds of those buttons with their gradients which I cropped in Photoshop and deleted texts.




Then I just imported these images to the engine and it gave me styles back.

.red-gradient {
background: #a3001e ; /* Old browsers */
background: -moz-linear-gradient(top, hsla(349,100%,32%,1) 0%, hsla(349,95%,28%,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(349,100%,32%,1)), color-stop(100%,hsla(349,95%,28%,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, hsla(349,100%,32%,1) 0%,hsla(349,95%,28%,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, hsla(349,100%,32%,1) 0%,hsla(349,95%,28%,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, hsla(349,100%,32%,1) 0%,hsla(349,95%,28%,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, hsla(349,100%,32%,1) 0%,hsla(349,95%,28%,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a3001e', endColorstr='#89041d',GradientType=0 ); /* IE6-9 */
box-shadow: 0px 2px 0px $red-shadow;
}

Vote Up Vote Down

Login to post a comment!