Create a line with different color - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Color

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Color

Description

Create a line with different color

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Colored line</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> 
  <style>

:root {<!--from  w  ww . j  av a  2  s . co m-->
   --blue: #24adb4;
   --green: #b0cc4b;
   --red: #fc5f59;
   --violet: #50176b;
}
.container {
   width: 800px;
   margin: 0 auto;
   text-align: center;
   margin-top: 100px;
}
h1 {
   font-size: 3em;
   margin-top: 1em;
}
p {
   margin: 1em;
   margin-bottom: 2em;
   font-size: 2em;
}
.line {
   height: 11px;
   background: #d1d2d4;
   position: relative;
}
.line:before, .line:after {
   content: '';
   height: 11px;
   width: 50%;
   display: block;
}
.line:before {
   background: linear-gradient(to right, var(--blue) 50%, var(--green) 50%);
}
.line:after {
   background: linear-gradient(to right, var(--red) 50%, var(--violet) 50%);
   position: absolute;
   top: 0;
   right: 0;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="container"> 
   <div class="line"></div> 
   <h1>test test test</h1> 
   <p>test test test test test element</p> 
   <div class="line"></div> 
  </div>  
 </body>
</html>

Related Tutorials