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:

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;
}

Answer 1

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.

Answer 2

I was having this issue, too... I would right-click the layer with the gradient overlay, select "copy CSS" and end up with an image for the gradient in the CSS. It turned out that in my case the problem was that my layer was linked to other layers.-[No, see correction below] Once I unlinked it and copied the CSS, I got the desired CSS3 gradient code with vendor prefixes and everything. (Using Photoshop CC 2015)

CORRECTION: My issue was not that the layer was linked, it was that it was a shape layer with no fill color. Once I added a fill color (my gradient overlay was set at 100% opacity so it didn't matter which fill color), it copied the CSS3 gradient code correctly whether the layer was linked or not.