CODEWITHSUNDEEP
htmlcss
user15334378
user15334378

Reputation:

Give gradient to a vertical line in CSS

I am using a vertical line in my html that I want to give gradient to. I have tried everything but nothing is working for me. Here's my code:

.vline
    {
      border-left: 5px solid green;   /* this green color gets displayed and not the gradient */
      
      background: #67B26F;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to left, #4ca2cd, #67B26F);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to left, #4ca2cd, #67B26F); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 
                                                                26+, Opera 12+, Safari 7+ */
      height: 50px;
    }
<div class="vline"></div>

EDIT: The green color that I am defining in border-left gets displayed. The gradient isn't. It should overwrite the previous color.

Upvotes: 2

Views: 1195

Answers (4)

user14206391
user14206391

Reputation:

what's the problem?

.vline
{
  background: -webkit-linear-gradient(to left, #4ca2cd, #67B26F); 
  background: linear-gradient(to left, #4ca2cd, #67B26F);
  height: 50px;
}
<div class="vline"></div>

Upvotes: 0

Package.JSON
Package.JSON

Reputation: 301

Try using border-left: 5px solid transparent; instead of border-left: 5px solid green;

Upvotes: 0

Yudiz Solutions
Yudiz Solutions

Reputation: 4449

Can you please check the below code? Hope it will work for you. We have used pseudo-elements for making the gradient border as per your requirement.

Please refer to this link: https://jsfiddle.net/yudizsolutions/9noqwj0c/1/

.vline {
  position: relative;
  background: #67B26F;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #4ca2cd, #67B26F);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #4ca2cd, #67B26F);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome                                                         26+, Opera 12+, Safari 7+ */
  height: 50px;
  padding-left: 10px;
}


.vline:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: rgb(219, 85, 83);
  background: -webkit-linear-gradient(top, rgba(219, 85, 83, 1) 0%, rgba(183, 183, 25, 1) 100%);
  background: linear-gradient(to bottom, rgba(219, 85, 83, 1) 0%, rgba(183, 183, 25, 1) 100%);

}
<div class="vline"></div>

Upvotes: 3

Mohammad Eslamiyeh
Mohammad Eslamiyeh

Reputation: 23

call class css in your html tag html:

<div class="vline"></div>

css:

 .vline{
        width: 7rem;
        border-bottom: 5px solid green;
        background: #67B26F;
        background: -webkit-linear-gradient(to left, #4ca2cd, #67B26F);
        background: linear-gradient(to left, #4ca2cd, #67B26F);
        height: 22rem;
    }

Upvotes: 1

Related Questions