Glow Effects

Text and box glow effects to add emphasis and visual interest to your UI

text-glow-sizes

Different glow intensities for various emphasis levels

Small Glow

Default Glow

Medium Glow

Large Glow

Extra Large Glow

<h1 class="glow-sm">Small Glow</h1>
<h1 class="glow">Default Glow</h1>
<h1 class="glow-md">Medium Glow</h1>
<h1 class="glow-lg">Large Glow</h1>
<h1 class="glow-xl">Extra Large Glow</h1>

color-variants

Theme-aware glow colours for different contexts

color-variants

Primary

.glow-primary

Secondary

.glow-secondary

Success

.glow-success

Warning

.glow-warning

Danger

.glow-danger

Info

.glow-info 
<div class="col-lg-4 col-md-6">
    <div class="card" style="background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);">
        <div class="card-body text-center py-5">
            <h3 class="glow-primary" style="color: white; margin: 0;">Primary</h3>
            <code class="mt-3 d-block" style="background: rgba(0,0,0,0.5); color: rgba(255,255,255,0.9); padding: 0.25rem 0.5rem; border-radius: 4px;">.glow-primary</code>
        </div>
    </div>
</div>
<div class="col-lg-4 col-md-6">
    <div class="card" style="background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);">
        <div class="card-body text-center py-5">
            <h3 class="glow-secondary" style="color: white; margin: 0;">Secondary</h3>
            <code class="mt-3 d-block" style="background: rgba(0,0,0,0.5); color: rgba(255,255,255,0.9); padding: 0.25rem 0.5rem; border-radius: 4px;">.glow-secondary</code>
        </div>
    </div>
</div>
<div class="col-lg-4 col-md-6">
    <div class="card" style="background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);">
        <div class="card-body text-center py-5">
            <h3 class="glow-success" style="color: white; margin: 0;">Success</h3>
            <code class="mt-3 d-block" style="background: rgba(0,0,0,0.5); color: rgba(255,255,255,0.9); padding: 0.25rem 0.5rem; border-radius: 4px;">.glow-success</code>
        </div>
    </div>
</div>
<div class="col-lg-4 col-md-6">
    <div class="card" style="background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);">
        <div class="card-body text-center py-5">
            <h3 class="glow-warning" style="color: white; margin: 0;">Warning</h3>
            <code class="mt-3 d-block" style="background: rgba(0,0,0,0.5); color: rgba(255,255,255,0.9); padding: 0.25rem 0.5rem; border-radius: 4px;">.glow-warning</code>
        </div>
    </div>
</div>
<div class="col-lg-4 col-md-6">
    <div class="card" style="background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);">
        <div class="card-body text-center py-5">
            <h3 class="glow-danger" style="color: white; margin: 0;">Danger</h3>
            <code class="mt-3 d-block" style="background: rgba(0,0,0,0.5); color: rgba(255,255,255,0.9); padding: 0.25rem 0.5rem; border-radius: 4px;">.glow-danger</code>
        </div>
    </div>
</div>
<div class="col-lg-4 col-md-6">
    <div class="card" style="background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);">
        <div class="card-body text-center py-5">
            <h3 class="glow-info" style="color: white; margin: 0;">Info</h3>
            <code class="mt-3 d-block" style="background: rgba(0,0,0,0.5); color: rgba(255,255,255,0.9); padding: 0.25rem 0.5rem; border-radius: 4px;">.glow-info</code>
        </div>
    </div>
</div>
<h1 class="glow-primary">Primary Glow</h1>
<h1 class="glow-success">Success Glow</h1>
<h1 class="glow-danger">Danger Glow</h1>

hover-effects

Add glow on hover for interactive elements

hover-effects

Default

.glow-hover

Primary

.glow-primary-hover

Secondary

.glow-secondary-hover

Success

.glow-success-hover

Warning

.glow-warning-hover

Danger

.glow-danger-hover

Info Hover

.glow-info-hover 
<div class="row g-4 text-center">
    <div class="col-lg-2 col-md-4 col-6">
        <h3 class="glow-hover" style="cursor: pointer; color: white; margin: 1rem 0;">Default</h3>
        <code style="background: rgba(0,0,0,0.6); color: rgba(255,255,255,0.95); padding: 0.2rem 0.4rem; border-radius: 4px; font-size: 0.75rem;">.glow-hover</code>
    </div>
    <div class="col-lg-2 col-md-4 col-6">
        <h3 class="glow-primary-hover" style="cursor: pointer; color: white; margin: 1rem 0;">Primary</h3>
        <code style="background: rgba(0,0,0,0.6); color: rgba(255,255,255,0.95); padding: 0.2rem 0.4rem; border-radius: 4px; font-size: 0.75rem;">.glow-primary-hover</code>
    </div>
    <div class="col-lg-2 col-md-4 col-6">
        <h3 class="glow-secondary-hover" style="cursor: pointer; color: white; margin: 1rem 0;">Secondary</h3>
        <code style="background: rgba(0,0,0,0.6); color: rgba(255,255,255,0.95); padding: 0.2rem 0.4rem; border-radius: 4px; font-size: 0.75rem;">.glow-secondary-hover</code>
    </div>
    <div class="col-lg-2 col-md-4 col-6">
        <h3 class="glow-success-hover" style="cursor: pointer; color: white; margin: 1rem 0;">Success</h3>
        <code style="background: rgba(0,0,0,0.6); color: rgba(255,255,255,0.95); padding: 0.2rem 0.4rem; border-radius: 4px; font-size: 0.75rem;">.glow-success-hover</code>
    </div>
    <div class="col-lg-2 col-md-4 col-6">
        <h3 class="glow-warning-hover" style="cursor: pointer; color: white; margin: 1rem 0;">Warning</h3>
        <code style="background: rgba(0,0,0,0.6); color: rgba(255,255,255,0.95); padding: 0.2rem 0.4rem; border-radius: 4px; font-size: 0.75rem;">.glow-warning-hover</code>
    </div>
    <div class="col-lg-2 col-md-4 col-6">
        <h3 class="glow-danger-hover" style="cursor: pointer; color: white; margin: 1rem 0;">Danger</h3>
        <code style="background: rgba(0,0,0,0.6); color: rgba(255,255,255,0.95); padding: 0.2rem 0.4rem; border-radius: 4px; font-size: 0.75rem;">.glow-danger-hover</code>
    </div>
</div>
<div class="row g-4 text-center mt-2">
    <div class="col-12">
        <h3 class="glow-info-hover" style="cursor: pointer; color: white; margin: 1rem 0;">Info Hover</h3>
        <code style="background: rgba(0,0,0,0.6); color: rgba(255,255,255,0.95); padding: 0.2rem 0.4rem; border-radius: 4px; font-size: 0.75rem;">.glow-info-hover</code>
    </div>
</div>
<button class="glow-hover">Hover for Glow</button>
<a href="#" class="glow-primary-hover">Primary on Hover</a>
<h1 class="glow-success-hover">Success on Hover</h1>

practical-examples

Real-world use cases for glow effects

Hero Title

Welcome to the Future

Transform your ideas into reality

<div class="demo-dark mb-3">
    <h1 class="glow-lg glow-primary" style="font-size: 3rem; margin: 0; color: white;">
        Welcome to the Future
    </h1>
    <p style="opacity: 0.8; margin-top: 1rem;">Transform your ideas into reality</p>
</div>
Navigation Links
<div class="demo-dark mb-3">
    <nav style="display: flex; gap: 2rem; justify-content: center;">
        <a href="#" class="glow-hover" style="color: white; text-decoration: none;">Home</a>
        <a href="#" class="glow-hover" style="color: white; text-decoration: none;">About</a>
        <a href="#" class="glow-primary-hover" style="color: var(--dm-primary); text-decoration: none;">Features</a>
        <a href="#" class="glow-hover" style="color: white; text-decoration: none;">Contact</a>
    </nav>
</div>
Call to Action Button
<div class="demo-dark mb-3">
    <button type="button" class="btn btn-primary btn-lg glow-primary glow-hover" style="font-size: 1.25rem; padding: 1rem 2rem;">
        Get Started Now
    </button>
</div>
Status Badges
LIVE BETA HOT 
<div class="demo-dark mb-3">
    <span class="badge badge-success glow-success" style="font-size: 1rem; padding: 0.5rem 1rem;">
        LIVE
    </span>
    <span class="badge badge-warning glow-warning mx-3" style="font-size: 1rem; padding: 0.5rem 1rem;">
        BETA
    </span>
    <span class="badge badge-danger glow-danger" style="font-size: 1rem; padding: 0.5rem 1rem;">
        HOT
    </span>
</div>

css-variables

Customize glow effects using CSS custom properties

/* Default glow variables */
:root {
    --dm-glow-sm: 0 0 8px rgba(255, 255, 255, 0.3);
    --dm-glow: 0 0 15px rgba(255, 255, 255, 0.5);
    --dm-glow-md: 0 0 20px rgba(255, 255, 255, 0.6);
    --dm-glow-lg: 0 0 30px rgba(255, 255, 255, 0.7);
    --dm-glow-xl: 0 0 40px rgba(255, 255, 255, 0.8);
    
    /* Colour variants */
    --dm-glow-primary: 0 0 20px rgba(59, 130, 246, 0.6);
    --dm-glow-success: 0 0 20px rgba(34, 197, 94, 0.6);
    --dm-glow-danger: 0 0 20px rgba(239, 68, 68, 0.6);
}

/* Custom glow */
.custom-glow {
    text-shadow: 0 0 25px rgba(147, 51, 234, 0.8);
}

Custom Example

Custom Purple Glow

reference

Size Classes

  • .glow-sm - Small glow effect (8px)
  • .glow - Default glow effect (15px)
  • .glow-md - Medium glow effect (20px)
  • .glow-lg - Large glow effect (30px)
  • .glow-xl - Extra large glow effect (40px)

Colour Classes

  • .glow-primary - Primary theme colour glow
  • .glow-secondary - Secondary theme colour glow
  • .glow-success - Success/green glow
  • .glow-warning - Warning/yellow glow
  • .glow-danger - Danger/red glow
  • .glow-info - Info/blue glow

Hover Classes

  • .glow-hover - Default glow on hover
  • .glow-primary-hover - Primary glow on hover
  • .glow-success-hover - Success glow on hover
  • .glow-warning-hover - Warning glow on hover
  • .glow-danger-hover - Danger glow on hover