EverWeb Widgetbox

Neon HTML Heading Widget
Neon HTML Heading Widget

NEON

Neon Heading Using Google Fonts & Multiple Text Shadows & Colors

The heading uses a Google hosted font and the neon effect is created using up to eight box shadows with different widths and colors. Note that the choice of background color has a big influence on the finished result.

If a web safe font is required, leave the font box empty and chose from the list of websafe fallback fonts.

The heading example shown above uses "Days One" and is set to h2 since the website name in the header is an h1.

See THIS page for more info about how to use HTML headings and why they are very important for SEO.  

Widget Settings

Get The Widget

Enter the heading text and set the heading type.

Enter the name of the required Google hosted font.

Select a suitable fallback font from the web safe list.

Set the font size, colorand letter spacing.

Set the background color and corner radius of the container if required.

Adjust the value for top/bottom padding and set the widget to a suitable size using the drag handles or the Metrics inspector.

Adjust the color and radius of the individual shadows to get the desired effect.