A gradient divider with CSS

May 1, 2022 0 comments

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">&nbsp;</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 this 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.

Below is a colorful divider:

 

To create it I have modified 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 I used

<div id="divider1">&nbsp;</div>
Cover photo by Katie Moum on Unsplash

Comments

Related Posts

{{posts[0].title}}

{{posts[0].date}} {{posts[0].commentsNum}} {{messages_comments}}

{{posts[1].title}}

{{posts[1].date}} {{posts[1].commentsNum}} {{messages_comments}}

{{posts[2].title}}

{{posts[2].date}} {{posts[2].commentsNum}} {{messages_comments}}

Recent Comments

Contact Form