Question 258452 in Html Question posted in
Some basic documentation can be found here.

Html – Gradient on a div border in CSS

I need to put a border with a gradient on a div like below, I’ve already tried a few methods but none of them work…
How can I do it?
Thanks in advance
The gradient is:

linear-gradient(93deg, #6FB3D9 -0.72%, rgba(217, 217, 217, 0.00) 98.53%, rgba(111, 179, 217, 0.00) 98.53%)

This is a screenshot from Figma

I’ve tried box-shadows, outline, border but none of them work, or I’ve used them wrong.

Tags:

2

Answers


  1. 0

    You can use border-image with linear-gradient

    .box {
    border:30px solid;
    border-image: linear-gradient(blue, red) 30;
}
    Login or Signup to reply.
  2. 0

    In this case, to use the gradient in the border I see 2 ways, the first was commented on in a previous answer, which is using border-image.

    div{
    border-width: 5px;
    border-style: solid;
    border-image: linear-gradient(93deg, #6FB3D9 -0.72%, rgba(217, 217, 217, 
    0.00) 98.53%, rgba(111, 179, 217, 0.00) 98.53%) 30;
}

    Another way, which I don’t recommend, but is possible if you have a problem using the border-image with another tag or in cases like a form, is to define a background-image on a top element and create a child for that element with the desired color. The gradient styling can be done entirely on the parent using the ::before pseudo-element.

    Referências:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search