CODEWITHSUNDEEP
cssgradientlinear-gradients
Boltosaurus
Boltosaurus

Reputation: 2216

Making gradient border look like a line

How can I make the gradient border between to colors look like a line? Is there also a way to start the line in left bottom corner and not in the middle of right side of the button? I'm using this css for this:

background: linear-gradient(to right bottom, #00C9FF 30%, black 50%)

enter image description here

Upvotes: 1

Views: 60

Answers (2)

Sebastian Brosch
Sebastian Brosch

Reputation: 43574

You can use the following code to get the expected result:

div {
  background: linear-gradient(to right bottom, #00C9FF calc(50% - 1px), black calc(50% + 1px));
  border:7px solid #00C9FF;
  color:#fff;
  height:100px;
  line-height:100px;
  text-align:center;
  width:100px;
}
<div>Test</div>

The calc() is needed to make the line smooth. Otherwise the border looks very strange on some browser.

Upvotes: 1

Gabriel
Gabriel

Reputation: 2190

You should move both colors to the same position:

background: linear-gradient(to right bottom, #00C9FF 30%, black 30%);

Upvotes: 0

Related Questions