CODEWITHSUNDEEP
css
Clams Are Great
Clams Are Great

Reputation: 280

Apply Gradient to an Outline

How do I apply a gradient to an outline?

From my understanding it is possible to do this with borders through border-image, however, I have not found the implementation of a gradient to an outline.

Is it possible?

Gradient Example

linear-gradient(179.98deg, rgba(104, 213, 255, 1) 0.12%, rgba(45, 179, 222, 1) 14.53%, #467EE3 99.88%);

Edit:

I have an existing border (1px #000 solid), so border-image will not work.

Edit #2:

jsfiddle example of current https://jsfiddle.net/b4x0fame/

While maintaining the black border, I would like the outline to be a gradient.

Upvotes: 2

Views: 6299

Answers (3)

Simrandeep Singh
Simrandeep Singh

Reputation: 585

Here is a working example of border-image. You can check it out and use the same technique in your code: jsfiddle

<div class='bordered'>1</div>

div {
height: 100px; width: 100px;
font-size: 50px;
line-height: 100px;
text-align: center;
margin: 10px auto;
background-clip: padding-box;
}
.bordered {
border: 20px double pink;
border-image: -webkit-linear-gradient(45deg,orange,yellow) 20 stretch;
}

Upvotes: 2

Alfin Paul
Alfin Paul

Reputation: 1621

.top-to-bottom { border-width: 1px; border-style: solid; -webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%; -webkit-border-image: -webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; -moz-border-image: -moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; -o-border-image: -o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; border-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0)) 1 100%; }
<div class="top-to-bottom"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>

Upvotes: 0

meyer9
meyer9

Reputation: 1140

You can simply set border-image to your gradient. In this case, something like:

border-width: 1px;
border-style: solid;
border-image: linear-gradient(179.98deg, rgba(104, 213, 255, 1) 0.12%, rgba(45, 179, 222, 1) 14.53%, #467EE3 99.88%);

https://css-tricks.com/examples/GradientBorder/

Upvotes: 0

Related Questions