Subtle Radial Shadow Underline

Developer
Neil Renicker
Size
3,295 Kb
Views
20,240
  1. Subtle Radial Shadow Underline Previews
  2. Subtle Radial Shadow Underline HTML Codes
  3. Subtle Radial Shadow Underline CSS Codes

How do I make an subtle radial shadow underline?

This pen uses only CSS to create a subtle half-radial shadow underline on a heading element. The shadow element is created with before and after pseudo elements. It's responsive, too!. What is a subtle radial shadow underline? How do you make a subtle radial shadow underline? This script and codes were developed by Neil Renicker on 24 November 2022, Thursday.

Subtle Radial Shadow Underline Previews
IQ Test

Subtle Radial Shadow Underline - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Subtle Radial Shadow Underline</title> <link href='https://fonts.googleapis.com/css?family=Raleway:400,200' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1 class="heading">Life on the Mississippi</h1>
<p class="content">THERE was no use in arguing with a person like this. I promptly put such a strain on my memory that by and by even the shoal water and the countless crossing-marks began to stay with me. But the result was just the same. I never could more than get one knotty thing learned before another presented itself. Now I had often seen pilots gazing at the water and pretending to read it as if it were a book; but it was a book that told me nothing. A time came at last, however, when Mr. Bixby seemed to think me far enough advanced to bear a lesson on water-reading. <a class="attribution" href="http://www.online-literature.com/twain/life_mississippi/10/" title="Life on the Mississippi">—Mark Twain</a></p>
</body>
</html>

Subtle Radial Shadow Underline - Script Codes CSS Codes

body { font-family: 'Raleway', sans-serif;
}
.heading, .content { margin: 0 auto; text-align: center;
}
.heading { color: #5c5c5c; width: 75%; font-size: 2.5rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; line-height: 1.7; position: relative; padding: 1.5em 0 3em;
}
.heading:before { background: #fff; display: block; height: 1em; width: 100%; position: absolute; content: " "; bottom: 1.4em; z-index: 1;
}
.heading:after { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjQwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U0ZTRlNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -moz-radial-gradient(50% 40%, closest-side, #e4e4e4, #ffffff); background-image: -webkit-radial-gradient(50% 40%, closest-side, #e4e4e4, #ffffff); background-image: radial-gradient(closest-side at 50% 40%, #e4e4e4, #ffffff); bottom: .2em; display: block; height: 2em; width: 100%; position: absolute; content: " ";
}
.content { font-size: 1.2rem; line-height: 2.7; max-width: 40em; margin-top: 3em; margin-bottom: 3em;
}
.attribution { display: block; color: #cc5822;
}
Subtle Radial Shadow Underline - Script Codes
Subtle Radial Shadow Underline - Script Codes
Home Page Home
Developer Neil Renicker
Username tinystride
Uploaded November 24, 2022
Rating 3.5
Size 3,295 Kb
Views 20,240
Do you need developer help for Subtle Radial Shadow Underline?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Neil Renicker (tinystride) Script Codes
Name
Max-width on header elements
Animations and pseudo-elements
A Pen by Neil Renicker
Vmin Intrinsic Ratio
World Map with Pulsing Dots
Chicago Flag in CSS
React Lifecycle Demo
Pure CSS Loading Block
Webgl
Magical inner shadows on a vertically scrolling element
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!