Text shadow / glow on Brave's startpage

Dear Brave Team

I would like to recommend some kind of clever little CSS text-shadow glow effect for Brave’s default startpage since there are those beautiful background images and sometimes, e.g. in combination with some of the landscapes colours, the orange text, the purple text, the blue text and the white text melt with the background and therefore can not be read well.

Maybe you guys are already developing a way more clever solution for this little detail because the following is just a rather simple idea to play with. You can adjust the values or refer to a more complex CSS text-shadow effect. I’ve tried to set it as decent as possible and tested it with most of Brave’s startpage background images in desktop-mobile and desktop view. I think the colours white or black fit onto orange, purple and blue aswell, while black seems to fit to most of the current background images except the label with the blue text (HTTPS Upgrades).

complex CSS shadow with basic approach:
.ibQMJw,.fmMWGr,.ikhDdX{text-shadow:rgba(0,0,0,.15) 0 0 3px, rgba(0,0,0,.15) 0 0 3px, rgba(0,0,0,.15) 0 0 3px, rgba(0,0,0,.15) 0 0 3px, rgba(0,0,0,.15) 0 0 3px, rgba(0,0,0,.15) 0 0 3px, rgba(0,0,0,.15) 0 0 3px, rgba(0,0,0,.15) 0 0 3px}

solid style:
.ibQMJw,.fmMWGr,.ikhDdX{text-shadow:-1.5px 0 .5px rgba(255,255,255,.95)}

glow style:
.ibQMJw,.fmMWGr,.ikhDdX{text-shadow:-.5px 0 12px rgba(0,0,0,.5)}

some slight ease-in-out animation with slow duration might be a neat and minimalistic approach, too:
.ibQMJw,.fmMWGr,.ikhDdX{animation:glow 8s ease-in-out infinite alternate}
@keyframes glow{
0%,100%{text-shadow:-.5px 0 8px rgba(255,255,255,0)}
50%{text-shadow:-.5px 0 8px rgba(255,255,255,.95)}
}

By adding multiple glow classes, e.g. glow-1 and glow-2, a CSS delay animation could add a kinda focus like effect. If you like the idea I could post a working example for all affected classes along with some little timing’s setup. Here’s a little example with the main text classes:

.ibQMJw{animation-delay:3s}
.fmMWGr{animation-delay:6s}
.ikhDdX{animation-delay:9s}

Thanks for reviewing and keep up the outstanding work! :lion:

1 Like