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