SOURCE

new Vue({
    el: '#fatcatgradient',
    data: {
        inputgradient: 'linear-gradient( 223deg, rgb(255,73,137) 0%, rgba(125,36,255,1) 50%, rgba(33,212,255,0.9) 100%);',
        finalgradient: '',
        deg: '',
        nodecolor: [],
        nodeposition: [],
        scroll: '',
        nodecolorObjectArr: [],
    },
    methods: {
        scan() {
            var str = this.inputgradient;
            var patt1 = /line.*?\);/;
            str = str.match(patt1)[0];

            var patt2 = /\(.*?(?=,)/;
            this.deg = str.match(patt2)[0].slice(1);

            var patt3 = /(rgb\(|rgba\().*?\)/g;
            var nodecolorarr = str.match(patt3);
            this.nodecolorObjectArr = [];
            for (i = 0; i < nodecolorarr.length; i++) {
                var nodecolorObject = {};
                var nodecolors;
                var reg = /rgb\(.*?\)/;
                nodecolors = nodecolorarr[i].match(/\(.*?(?=\))/)[0].slice(1);
                nodecolors = nodecolors.split(",");
                if (nodecolors.length==3) {
                    nodecolors.push(1);
                };
                nodecolorObject.R = nodecolors[0]*1;
                nodecolorObject.G = nodecolors[1]*1;
                nodecolorObject.B = nodecolors[2]*1;
                nodecolorObject.A = nodecolors[3]*1;
                this.nodecolorObjectArr.push(nodecolorObject);
            };

            var patt4 = /\).*?(?=%|px)/g;
            this.nodeposition = str.match(patt4);
            for(i=0;i<this.nodeposition.length;i++){
                this.nodeposition[i]=this.nodeposition[i].slice(1)*1;
            };
        },
        topleft() {
            this.deg = "to top left";
        },
        top() {
            this.deg = "to top";
        },
        topright() {
            this.deg = "to top right";
        },
        left() {
            this.deg = "to left";
        },
        right() {
            this.deg = "to right";
        },
        bottomleft() {
            this.deg = "to bottom left";
        },
        bottom() {
            this.deg = "to bottom";
        },
        bottomright() {
            this.deg = "to bottom right";
        },
        del(index) {
            if (this.nodeposition.length > 2) {
                this.nodeposition.splice(index, 1);
                this.nodecolorObjectArr.splice(index, 1);
            };
        },
        add(index) {
            this.nodeposition.splice(index, 0, this.nodeposition[index]);
            var newnode = {};

            newnode.R = this.nodecolorObjectArr[index].R;
            newnode.G = this.nodecolorObjectArr[index].G;
            newnode.B = this.nodecolorObjectArr[index].B;
            newnode.A = this.nodecolorObjectArr[index].A;
            this.nodecolorObjectArr.splice(index, 0, newnode);
        },
        nodecolorJoin() {
            this.nodecolor = [];
            for (i = 0; i < this.nodecolorObjectArr.length; i++) {
                var nodeunit;
                nodeunit = "rgba(" + this.nodecolorObjectArr[i].R + "," + this.nodecolorObjectArr[i].G + "," + this.nodecolorObjectArr[
                    i].B + "," + this.nodecolorObjectArr[i].A + ")";
                this.nodecolor.push(nodeunit);
            };
        },
        draw() {
            this.nodecolorJoin();
            var finalgradient = "";
            var deg = this.deg;
            var nodecolorarr = this.nodecolor;
            var nodepositionarr = this.nodeposition;
            var total = nodecolorarr.length;
            finalgradient = "linear-gradient( " + (typeof deg == "number" ? (deg + "deg") : deg);
            for (i = 0; i < total; i++) {
                finalgradient = finalgradient + ", " + nodecolorarr[i] + " " + nodepositionarr[i] + "%";
            };
            finalgradient = finalgradient + ")";
            this.finalgradient = finalgradient;
        },
        rotate() {
            if (typeof this.deg == "number") {
                this.deg += 15;
                if (this.deg >= 360) {
                    this.deg = this.deg % 360;
                }
            } else {
                this.deg = 0;
            }
        },
        focus(event) {
            event.currentTarget.select();
        },
    },
    mounted: function () {

    },
    computed: {
        computed2watch() {
            var nodeArr = this.nodecolorObjectArr;
            var nodestring = "";
            for (i = 0; i < nodeArr.length; i++) {
                nodestring = nodestring + nodeArr[i].R + nodeArr[i].G + nodeArr[i].B + nodeArr[i].A;
            };
            return nodestring;
        },
    },
    watch: {
        inputgradient: function () {
            this.scan();
        },
        deg: function () {
            this.draw();
        },
        computed2watch: function () {
            this.draw();
        },
        nodeposition: function () {
            this.draw();
        },
    },
    created() {
        this.scan();
    }
});
$(function () {
    var clipboard = new Clipboard("#copy");
    clipboard.on("success", function (element) { });
});

<div id="fatcatgradient">
	<div style="display: flex;margin: 0;">
		<div class="setbox">
			<div style="width: 100%;height: 10%; flex: 1 1 10%;display: flex;align-items: stretch;">
				<div class="setboxconer" @click="topleft"></div>
				<div class="setboxcenter" @click="top"></div>
				<div class="setboxconer" @click="topright"></div>
			</div>
			<div style="width: 100%;height: 10%; flex: 1 1 80%;display: flex;align-items: stretch;">
				<div class="setboxconer" @click="left"></div>
				<button class="setboxcenter" :style="{backgroundImage:finalgradient,borderRadius:0}" @click="rotate"></button>
						<div class="setboxconer" @click="right"></div>
					</div>
					<div style="width: 100%;height: 10%; flex: 1 1 10%;display: flex;align-items: stretch;">
						<div class="setboxconer" @click="bottomleft"></div>
						<div class="setboxcenter" @click="bottom"></div>
						<div class="setboxconer" @click="bottomright"></div>
					</div>
				</div>
				<textarea v-model="inputgradient" :style="{backgroundImage:finalgradient}" id="textinput" @focus="focus($event)"></textarea>
			</div>

			<div :style="{backgroundImage:finalgradient}" id="copy" data-clipboard-target="#copy" data-clipboard-action="copy">
				<div style="display: inline-block;">
					{{finalgradient}};
				</div>
			</div>

			<div class="colors">
				<div v-for="(item,index) in nodecolorObjectArr" :style="{textAlign:'center',background:'linear-gradient( 90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 100%) '+nodecolor[index],flex:'1 1 100px',padding:'5px 5px 15px 0'}">
					<div style="display: flex;justify-content: flex-end;">
                        <div class="textgradient position">
						{{nodeposition[index]}}<span style="font-size:20px;vertical-align:top;line-height:1.3;">%</span>
					</div>
						<button @click="del(index)">
							×
						</button>
						<button style="margin-right: 2px;" @click="add(index)">
							+
						</button>
					</div>

					
                    <div class="textgradient">
						R: {{nodecolorObjectArr[index].R}}
					</div>
					<input type="range" v-model="nodecolorObjectArr[index].R" max="255" min="0">
					<br>
					<div class="textgradient">
						G: {{nodecolorObjectArr[index].G}}
					</div>
					<input type="range" v-model="nodecolorObjectArr[index].G" max="255" min="0">
					<br>
					<div class="textgradient">
						B: {{nodecolorObjectArr[index].B}}
					</div>
					<input type="range" v-model="nodecolorObjectArr[index].B" max="255" min="0">
					<br>
					<div class="textgradient">
						A: {{nodecolorObjectArr[index].A}}
					</div>
					<input type="range" v-model="nodecolorObjectArr[index].A" max="1" min="0" step="0.05">
					<div style="display: none;">{{computed2watch}}</div>
				</div>
			</div>

			<div style="width: 100%;margin: 10px 0px 20px;">
				<div v-for="(item,index) in nodeposition">
					<input type="range" v-model="nodeposition[index]" style="width: 100%;" :style="{backgroundColor: nodecolor[index]}">
				</div>
			</div>
		</div>
<div style="font-size:12px;font-weight:900;color:#0e9bff;text-align:center;">✨ Fat<span style="font-weight:400;">Cat</span> ✨</div>

		</div>

* {
    font-family: Futura, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

::selection {
    color: #FFFFFF;
    background-color: #bd77ff;
    text-shadow: none;
}

#fatcatgradient {
    min-width: 500px;
    max-width: 800px;
    width: 100%;
    margin: auto;
}

#copy {
    width: 100%;
    color: white;
    text-shadow: 1px 1px 0 rgb(117, 117, 117);
    font-size: 20px;
    font-weight: 700;
    text-align: justify;
    word-break: break-all;
    height: 130px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto;
}

#textinput {
    flex: 1 1 0;
    vertical-align: bottom;
    width: 50%;
    height: 300px;
    color: white;
    text-shadow: 1px 1px 0 rgb(117, 117, 117);
    font-size: 12px;
    font-weight: 100;
    text-align: center;
    padding: 20px;
    word-break: break-all;
    text-align: justify;
    resize: none;
    outline: none;
    border: none;
}

.setbox {
    display: inline-flex;
    vertical-align: bottom;
    flex-flow: column wrap;
    align-items: stretch;
    width: 300px;
    height: 300px;
    margin: auto;
}

.setboxconer {
    margin: 0;
    display: inline-block;
    background-image: linear-gradient(45deg, #92fe9d 0%, #00c9ff 100%);
    width: 10%;
    height: 100%;
}

.setboxcenter {
    margin: 0;
    width: 80%;
    height: 100%;
    background-image: linear-gradient(45deg, #92fe9d 0%, #00c9ff 100%);
}

.colors {
    display: flex;
    overflow: auto;
    color: rgb(255, 255, 255);
    font-weight: 700;
}

.textgradient {
    display: block;
    white-space: nowrap;
    margin: 10px 0 -10px 10px;
    text-shadow: 1px 1px #8c8c8c;
    text-align: left;
    font-weight: 500;
}

.position {
    line-height: 1;
    font-size: 45px;
    font-weight: 900;
    opacity: 0.5;
    margin-top: 0px;
    text-align: left;
    flex: 1 0 auto;
}

input[type="range"] {
    -webkit-appearance: none;
    background-color: #ebeff4;
    width: 100%;
    height: 2px;
    padding: 0;
    border: none;
    outline: none;
    margin: 0;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 12px;
    width: 12px;
    background: #1c76ff;
    border-radius: 10px;
    outline: none;
}

button {
    outline: none;
    border: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: rgb(255, 255, 255);
    line-height: 1;
    font-size: 20px;
    color: #1C76FF;
    flex: 0 1 auto;
    margin-right: 10px;
    z-index: 2;
}

::-webkit-scrollbar {
    width: 14px;
    background-image: linear-gradient(45deg, #92fe9d 0%, #00c9ff 100%);
}

::-webkit-scrollbar-thumb {
    background-image: linear-gradient(45deg, #00c9ff 0%, #92fe9d 100%);
}