CODEWITHSUNDEEP
javascripthtmlcssvuejs2
TTaJTa4
TTaJTa4

Reputation: 840

CSS - linear-gradient does not work in the background property

I'm trying to create a tree using vue-orgchart (link)

It works fine, but I would like to change the green background of the node (ignore the white part).

enter image description here

The css can be found in the following link.

I found out that the green color is: #42b983. So it easy to find it in the css file:

.orgchart .node .title {
  text-align: center;
  font-size: 12px;
  font-weight: 300;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: #42b983;
  color: #fff;
  border-radius: 4px 4px 0 0;
}

And just change it:

background-color: linear-gradient(#66cccc, #3399cc);

But, for some reason, I get:

enter image description here

If I try to use any other color (without linear-gradient) it will be successful.

Also, I use this style (linear-gradient) in other parts of the web, and it works fine, so it isn't the problem with the browser (I use chrome if it matters).

How can I solve this issue?

Upvotes: 1

Views: 224

Answers (1)

Hira Kumar Maharjan
Hira Kumar Maharjan

Reputation: 278

please put below code

background-image: linear-gradient(#66cccc, #3399cc);

Upvotes: 2

Related Questions