willaengine/resources/js/Global/components/Body/Backgrounds/Gradient-CSS.vue

<template>
    <div>
        <div class="backgrounds" :style="'background: linear-gradient(163deg, #'+C1+', #'+C2+', #'+C3+');'"></div>
    </div>
</template>

<script>
export default {
    props: {
        C1: { default: '1C0F41' },
        C2: { default: 'ee3552' },
        C3: { default: '0C1630' },
    },

};
</script>

<style lang="scss" scoped>

.backgrounds {
    // background: linear-gradient(163deg, #1C0F41, #085156, #0C1630);
    background-size: 100% 100%;
    // -webkit-animation: MovingBackground 3s ease infinite;
    // -moz-animation: MovingBackground 3s ease infinite;
    // -o-animation: MovingBackground 3s ease infinite;
    animation: MovingBackground 3s ease all infinite;
    min-width: 100%;
    min-height: 100%;
    position:fixed;
    z-index: -1;
    background-position:0% 0%;

}

// @-webkit-keyframes MovingBackground {
//     0%{background-position:37% 0%}
//     50%{background-position:64% 100%}
//     100%{background-position:37% 0%}
// }
// @-moz-keyframes MovingBackground {
//     0%{background-position:37% 0%}
//     50%{background-position:64% 100%}
//     100%{background-position:37% 0%}
// }
// @-o-keyframes MovingBackground {
//     0%{background-position:37% 0%}
//     50%{background-position:64% 100%}
//     100%{background-position:37% 0%}
// }
@keyframes MovingBackground {
    0%{background-position:37% 0%}
    50%{background-position:64% 100%}
    100%{background-position:37% 0%}
}
@keyframes FadeBackground {
    0%{opacity:1}
    50%{opacity:0}
    100%{opacity:1}
}


</style>