Make glow effect stronger

[MiguelMaya]

Hello, i did a glow effect for title and buttons on my page with help of the Shopify community. I want to make the glow effect stronger, I’ve not figured that out on the code. Please help me, thanks!!

Using Dawn 15 misteri.ca

Code used:

.banner__heading {
  position: relative;
  display: inline-block;
  text-align: center; /* Center-align the content */
}
.banner__heading {
  display: block;
  max-width: 100%;
  height: auto;
  position: relative;
}
.banner__heading::after {
  content: '';
  position: absolute;
  bottom: 50%; /* Position the underline centered vertically */
  left: 50%; /* Position the underline centered horizontally */
  transform: translate(-50%, 50%); /* Adjust to center the underline */
  width: 80%; /* Adjust the width of the underline */
  height: 5px;
  background-color: transparent;
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0); /* Initial box-shadow (transparent white), wider spread */
  transition: box-shadow 0.4s ease; /* Smooth transition for the glow effect */
}
.banner__heading:hover::after {
  background-color: rgba(255, 255, 255, 0.04);
  box-shadow: 0 10px 60px rgba(255, 255, 255, 1); /* White glowing effect on hover, even wider spread */

[suyash1]

@MiguelMaya - glow effect is on buttons, what do you mean by stronger?

[MiguelMaya]

I mean to make the effect broader, both in width and height.

[BSS-TekLabs]

Hi @MiguelMaya,

You can follow these steps to make the glowing effect that you want

1. Open Online Store > Theme > Edit Code

2. Find and open the base.css (or theme.css, custom.css) file

3. Paste the code snippet below at the bottom of the file and hit save

.banner__heading {
    transition: text-shadow 0.5s ease-in-out; /* Smooth transition for text-shadow */
}

.banner__heading:hover {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff, 0 0 50px #fff;
}

Here is the result

Hope this helps you solve the issue.

Please don't forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!

[MiguelMaya]

Thanks that helps too. I was actually referring to make the glow effect space bigger, that is wider and taller. Please.

[MiguelMaya]

And like the code before, i prefer the effect be added to the box__shadow rather than text__shadow.

[BSS-TekLabs]

Hi @MiguelMaya,

You can make the glow effect stronger to your preference by repeating the box shadow in the hover state, just like with the text shadow. Here is the code

.banner__heading {
  display: block;
  max-width: 100%;
  height: auto;
  position: relative;
}
.banner__heading::after {
  content: '';
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  /* You can change this value to make the shadow longer */
  width: 96%;
  /* You can change this value to make the show wider and stronger */
  height: 10px;
  background-color: transparent;
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0);
  transition: 0.4s ease;
  
}
.banner__heading:hover::after {
  background-color: rgba(255, 255, 255, 0.42);
  /* You can change the 3rd parameter to make the blur wider */
  box-shadow: 0 10px 60px rgba(255, 255, 255, 1), 0 10px 60px rgba(255, 255, 255, 1), 0 10px 60px rgba(255, 255, 255, 1), 0 10px 60px rgba(255, 255, 255, 1);
}

Here is the result

Hope this helps you solve the issue.

Please don't forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!