Welcome to our article showcasing an enchanting collection of CSS Glow Effects! In this compilation, we have curated a selection of free HTML and pure CSS code examples that demonstrate the mesmerizing glow effect. This update of November 2022 brings you 13 new items, sourced from popular platforms like CodePen, GitHub, and other valuable resources.

Glow effects have the power to add a touch of magic and allure to your web design projects. By utilizing CSS properties and animations, these effects create a luminous and radiant appearance, making elements on your website stand out and capture attention.

Each code example in this collection has been carefully chosen to showcase the versatility and creativity of glow effects. From subtle and elegant glows to vibrant and dynamic glowing animations, these code examples offer a wide range of possibilities to enhance your web design.

By leveraging the power of CSS and HTML, these glow effects are lightweight, fast-loading, and easily customizable to suit your design needs. Whether you want to highlight buttons, text, images, or backgrounds, these code examples provide a solid foundation for achieving a captivating glow effect.

Get ready to illuminate your design with this collection of hand-picked CSS glow effect code examples.

Demo image: Single DIV CSS Neon 10

Author

  • Lynn Fisher

Made with

  • HTML / CSS (Stylus)

About a code

Single DIV CSS Neon 10

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Ashton

Made with

  • HTML / CSS

About a code

Button Glow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Ward Larson

Made with

  • HTML / CSS (Less)

About a code

Image Glow Effect Using Background

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ashton

Made with

  • HTML / CSS

About a code

Menu Hover Glow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Neon Shadow

Author

  • Oscar-Jite

Made with

  • HTML / CSS

About a code

Neon Shadow

Neon/glowing shadows look great on dark pages.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Abdullah Türkmen

Made with

  • HTML / CSS (SCSS)

About a code

Voice

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: 3D Glowing Keyboard (HTML & CSS)

Author

  • Tanya

Made with

  • HTML / CSS

About a code

3D Glowing Keyboard (HTML & CSS)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Kodplay

Made with

  • HTML / CSS

About a code

Glowing Gradient Glassmorphism Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Jon Kantner

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Glowing Slinky

A looping CSS animation of a glow-in-the-dark slinky.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • rgembalik

Made with

  • HTML / CSS (SCSS)

About a code

Light Circle with Glow Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • wojtek

Made with

  • HTML / CSS (SCSS)

About a code

Animated Gradient Underglow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • JoshuaDavids

Made with

  • HTML / CSS

About a code

Glowing Gradient Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Triangle With Neon Glow Effect

Author

  • Dave Brogan

Made with

  • HTML / CSS (SCSS)

About a code

Triangle With Neon Glow Effect

CSS neon glow effect using drop shadows and clip-path.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Sathya

Made with

  • HTML / CSS (SCSS)

About a code

Gradient Glow Letter

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • quangdao

Made with

  • HTML / CSS

About a code

Card Outer GLow Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: fontawesome.js

Author

  • Keely

Made with

  • HTML / CSS

About a code

Scanning Glow Lines

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Kevin Miranda

Made with

  • HTML / CSS (SCSS)

About a code

Buttons With Neon Glow

A CSS only implementation of glass-like neon glow buttons with text gradients & box-shadows.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Jesper Lauridsen

Made with

  • HTML / CSS

About a code

Button With Hover Glow

Gradient color button with hover glow.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Glowing Polygons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Leandro Simões

Made with

  • HTML / CSS

About a code

Pure CSS Button Hover Glow Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Maryam

Made with

  • HTML / CSS

About a code

Glow Effects

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Riccardo Volpe

Made with

  • HTML / CSS

About a code

Glowing & Responsive Text

Changing the content property of an html element also applying a glow effect with a smooth transition, using CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Jean-Pierre Barthelemy

Made with

  • HTML / CSS (SCSS)

About a code

The Glow 60s Edition

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Kellie Kowalski

Made with

  • HTML / CSS

About a code

Glowing Stuff

Exploration of pulsing glow effects for a banner animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Lou

Made with

  • HTML / CSS

About a code

Spinner with Glowing, Gooey Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -