Make glow effect broader

Store Design
, , , ,

Topic summary

A user implemented a CSS glow effect on hover for their Shopify Dawn 15 theme banner heading and wants to make it broader. They also request an automatic glow animation for mobile devices since hover effects don’t work on touch screens.

Current Implementation:

  • Uses ::after pseudo-element with box-shadow on .banner__heading
  • Glow activates on hover with transition effects
  • Width currently set at 80%

Solution Provided:
A community member (BSS-TekLabs) offered CSS code modifications:

  • Increase width to 96% for broader effect
  • Adjust blur spread via the 3rd parameter in box-shadow
  • Modify height from 5px to 10px
  • Fine-tune box-shadow values for stronger glow (multiple layered shadows with 60px blur)

Note: The mobile animation request remains unaddressed. The code snippets contain reversed text (likely a display issue), but the solution includes a visual example showing the enhanced glow effect.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

We made a very cool glow effect when hovering over. I want it to be broader. Ill reference the code here.

Also, this obviously only works for desktop version, it’d be very cool to have an automatic glow animation running for itself that looks just the same whenever someone enters the mobile version.

You’re all so helpful thanks!

Using Dawn 15 misteri.ca

IMG_0583.png
IMG_0583.png2360×1640 590 KB

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 */ 
1 Like
2

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 {
  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
BSSTekLabs_1-1720192767490.png2879×1216 508 KB

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!