Below is a divider I use on some of my blogs, implemented using CSS and <div> tags.
If you want to use it in your blog posts, you will need to edit the HTML code of the blog post and add the following code:
<style>
#divider {
margin: 20px auto 20px auto;
text-align: center;
height: 2px;
width: 80%;
/* hsl(hue saturation lightness / alpha) */
/* https://www.w3schools.com/colors/colors_picker.asp */
background: linear-gradient(90deg, hsl(196, 100%, 55%), hsl(196, 100%,32%), hsl(196, 100%, 55%));
}
<style>Then, edit the HTML code of the page and, in the place where you want the divider to appear enter the following code:
<div id="divider"> </div>
Variations
If you use this divider on multiple pages, it is better to copy the styling into the theme’s custom CSS:
#divider {
margin: 20px auto 20px auto;
text-align: center;
height: 2px;
width: 80%;
/* hsl(hue saturation lightness / alpha) */
/* https://www.w3schools.com/colors/colors_picker.asp */
background: linear-gradient(90deg, hsl(196, 100%, 55%), hsl(196, 100%,32%), hsl(196, 100%, 55%));
}To change the colors of the divider, you can use https://www.w3schools.com/colors/colors_picker.asp to pick up the desired colors.
In the example above I chose the main theme color for the central area of the gradient. Then I used the site mentioned above to choose a slightly lighter shade for the left and right edges of the gradient.
If you need a colorful divider you can change the CSS code to:
<style>
#divider1 {
margin: 20px auto 20px auto;
text-align: center;
height: 2px;
width: 80%;
/* hsl(hue saturation lightness / alpha) */
background: linear-gradient(90deg, hsl(0, 100%, 50%), hsl(60, 100%,50%), hsl(216, 100%, 50%));
}
</style>and in HTML you can use
<div id="divider1"> </div>
Cover photo by Katie Moum on Unsplash
