A High-performance Wrapper Component To Give Dynamic Glow Effects In Vue

Vue Glow is a simple component that allows giving any item a glow/colored effect. VueGlow was initially designed to extend the capabilities of vuetify, however, it will work equally well without Vuetify. The dynamic glow effect was done in pure CSS which means there are no additional dependencies.

hover grow effect css, css grow animation, flex grow example, css hover effects, div hover effect css, flex grow vertically

Glowing Text Effect Using Cascading Style Sheets In Pure CSS

How to make use of it:

Install and download:

$ npm i vue-glow --save

1. Import the VueGlow component.

import VueGlow from 'vue-glow';

2. Add the VueGlow component to the template.

// soft
<VueGlow color="#18806C" mode="hex" elevation="11" intensity="1.67">Anything you want!</VueGlow>
// intense
<VueGlow color="#18806C" mode="hex" elevation="11" intensity="1.67" intense>Anything you want!</VueGlow>

3. Apply a fade transition to a glow effect.

<VueGlow color="#18806C" mode="hex" fade interval="31" elevation="11" intensity="1.67" intense>Anything you want!</VueGlow>


colorChanges the color of the glow. Can either be a color name, hex, a RGB dict, HSL dict, or HSV dict.“red”
elevationChanges the elevation effect of the glow. Can be a number between 0-24.12
intensityCustomize the intensity of the glow. Can be a number between 0-4.1
intenseDoubles the intensity of the glow.false
roundedAllows a border radius to be specified.4px
tileNo border radius.false
disabledDisables the glow effect. Disabling will pause any animation.false

Grow Effect To Elements, Vue Glow Plugin/Github

See Demo And Download

Official Website(awtkns): Click Here

This superior jQuery/javascript plugin is developed by awtkns. For extra Advanced Usages, please go to the official website.

Related Posts


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


Select Box Based Star Rating JavaScript Library | star-rating.js

star-rating.js is a small JavaScript library to create a customizable and gradually improved star rating control from a regular tick box with numeric values. The ES6 module…


Corner Fixed Notifications Alerts With Bootstrap | BS4 Show Notification

Bootstrap Notification is an easy-to-use jQuery plugin that uses the Bootstrap Alerts component to create static, rejectable, and stackable notification popups in the upper right corner of the…


Create Stackable Multi-level Sidebar Menu | HC Off-canvas Nav

Multi-Level Sidebar Slide Menu – HC MobileNav is a jQuery plugin for creating multi-level, mobile-first, totally accessible, off-canvas facet navigation that helps the infinite nesting of submenu…


Responsive Masonry Layout with SSR Support for Vue 3 | vue-masonry-wall

Vue masonry wall is a responsive masonry layout component for Vue 3 to deliver a Masonry-style responsive grid layout with SSR and RTL layout support. Features 📱…


A Bootstrap 5 Toast Notification Framework Library | bs-toaster

bs-toaster is simple to instantiate bs-toaster and create multiple toasts effortlessly using native Bootstrap 5! Feature Facts Small and clean Modern browser support. No IE sorry 💥…