Make glow effect stronger

Make glow effect stronger

MiguelMaya
Tourist
46 0 4

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 */

 

Replies 6 (6)

suyash1
Shopify Partner
9530 1190 1528

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

Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
MiguelMaya
Tourist
46 0 4

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

BSS-TekLabs
Shopify Expert
399 123 131

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

BSSTekLabs_1-1720099347678.png

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!

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
MiguelMaya
Tourist
46 0 4

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

MiguelMaya
Tourist
46 0 4

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

BSS-TekLabs
Shopify Expert
399 123 131

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

BSSTekLabs_1-1720192767490.png

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!

 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency