Advertisement


How to export a gradient overlay to CSS3 styles (in Photoshop CC)?


Question

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:

enter image description here

Info of Registration button (Login is the same):

enter image description here

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.

enter image description here enter image description here

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;
}
2017/04/13
1
2
4/13/2017 12:46:00 PM

Accepted Answer

You might want to try the Ultimate CSS Gradient Generator. It allows you to create a gradient in an Adobe-like UI, including transparency, and outputs sextuple-redundant css so your gradient renders as nice as possible in any thinkable browser. Any features a browser doesn't support, it tries to degrade gracefully.

2014/09/29
5
9/29/2014 2:35:00 PM