Electronza
  • Homepage
  • Privacy
    • Privacy Policy
  • Contact
Electronza
  • Homepage
  • Privacy
    • Privacy Policy
  • Contact
Electronza
You are at:Home»Blogger / Blogspot»A gradient divider with CSS

A gradient divider with CSS

0
By Electronza on January 14, 2023 Blogger / Blogspot

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 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">&nbsp;</div>
Cover photo by Katie Moum on Unsplash
blogging Blogger CSS
Share. Facebook Twitter Pinterest LinkedIn Tumblr Email

Related Posts

A pretty text box for Blogger posts

Cleaning unused images from blogs hosted on Blogger

Prettifying preformatted text

Leave A Reply Cancel Reply

Latest posts
January 15, 2023

A pretty text box for Blogger posts

January 15, 2023

New blog section: beginners’ corner

January 15, 2023

Cleaning unused images from blogs hosted on Blogger

Categories
  • Beginners' corner
  • Electronics projects
    • ESP8266
    • Arduino projects
    • IoT
    • 8-bit PIC projects
    • Raspberry PI
    • PIC32 projects
    • Robots
  • Arduino libraries
  • Reviews
    • Tools & equipment
    • Development boards
    • IoT
    • Industrial Arduino
  • Blogger / Blogspot
  • Tutorials
  • Casual stuff
Popular posts
Arduino Uno 4-20mA communication using 4-20mA R click and 4-20mA T click boards from MikroElektronika: MIKROE-1296, MIKROE-1387, Uno Click Shield
August 17, 2016

4-20mA current loop Arduino tutorial Part I: hardware

ESP8266 Thing Dev from Sparkfun
May 15, 2019

ESP8266 – running on battery power

ECG click on Arduino Uno
December 5, 2016

ECG click: Arduino IDE code examples

Working DMX project
July 2, 2015

Arduino DMX master using RS485 click board

Arduino: DMX master and slave
November 2, 2015

Arduino: DMX Master and Slave

Copyright © 2023 Teodor Costachioiu

Type above and press Enter to search. Press Esc to cancel.