Background Color Transition Effect In Vue – Breathing Colors

Breathing Colors is a Vue.js plugin which applies an automatic transition effect to background colors.

How to use it:

Install and import the Breathing Colors.

import Vue from 'vue';
import BreathingColors from 'vue-breathing-colors';



<script scr="">

Basic usage. Override an array of background colors as shown below.

<div v-breathing-colors="example"></div>
export default {
  data() {
    return {
      sample: {
        colors: ['red', 'green', 'blue'],
        interval: 3000,
        transition: {
          duration: 2000

Download Details:

Author: mycurelabs

Live Demo: /demo/background-color-transition

Download Link:

Official Website:

Install & Download:

# Yarn
$ yarn add vue-breathing-colors

$ npm install vue-breathing-colors --save

Add Comment