Wie exportiere ich eine Verlaufsüberlagerung in CSS3-Stile (in Photoshop CC)?

Ich habe zwei Schaltflächen in meiner .psdVorlage. Sie sind mit einer Verlaufsüberlagerung. Ist es in Photoshop möglich, Farbverläufe als CSS-Stile zu exportieren?

Bitte sehen Sie sich ein Bild an.

Schaltflächen mit Farbverlauf:

Info der Registrierungsschaltfläche (Anmeldung ist die gleiche):

Ich versuche, die in Photoshop CC integrierte Funktion „CSS kopieren“ zu verwenden, aber es exportiert keine Farbverläufe. Es gibt es als .pngBild, was nicht erwünscht ist:

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

So erhalten Sie eine Verlaufsüberlagerung als Stile wie diese:

#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 */
}

AKTUALISIERT:

Eine kleine Anmerkung zur Antwort von Vincent ( https://graphicdesign.stackexchange.com/a/39231/30315 ). Um einen Farbverlauf von einem vorhandenen Element zu erhalten, müssen Sie ihn zuschneiden (einen Farbverlauf) und als .jpgoder .pngBild speichern und dann auf der Website importieren, und er gibt Ihnen Farbverlaufsstile zurück.

Oben sehen Sie die Schaltflächen. Hier sind die Hintergründe dieser Schaltflächen mit ihren Farbverläufen, die ich in Photoshop zugeschnitten und Texte gelöscht habe.

Dann habe ich diese Bilder einfach in die Engine importiert und sie hat mir Stile zurückgegeben.

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