CODEWITHSUNDEEP
htmlcssbackgroundbordergradient
user4575064
user4575064

Reputation:

CSS gradient on border

In the following code, the gradient has a width of 100% and goes over the border on the left side.

JSFiddle

input {
    background: transparent;
    font-family:'Open Sans';
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-sizing: border-box;
    padding: 5px;
    color: rgb(164, 164, 164);
}
input:focus {
    outline: none;
    border: 1px solid rgba(255, 255, 255, 0.5)
}
#demo {
    background : transparent linear-gradient(to right, rgba(109, 179, 242, 0) 0%, rgb(24, 189, 70) 100%, rgba(54, 144, 240, 0) 0%, rgba(58, 107, 182, 0) 100%);
}
body {
    background: hsla(0, 5%, 5%, 1) linear-gradient(to right top, rgba(10%, 0%, 0%, 1), rgba(0%, 0%, 0%, 1)) no-repeat fixed;
}
<input type="text" id="demo" />
<input type="text" />

Why does this happen and how can I avoid this?

Upvotes: 2

Views: 132

Answers (1)

Alexander O&#39;Mara
Alexander O&#39;Mara

Reputation: 60577

That is because the background will extend to the border edge by default. You can avoid this by using the background-clip property, by setting background-clip: padding-box;.

Working Example:

input {
    background: transparent;
    font-family:'Open Sans';
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-sizing: border-box;
    padding: 5px;
    color: rgb(164, 164, 164);
}
input:focus {
    outline: none;
    border: 1px solid rgba(255, 255, 255, 0.5)
}
#demo {
    background : transparent linear-gradient(to right, rgba(109, 179, 242, 0) 0%, rgb(24, 189, 70) 100%, rgba(54, 144, 240, 0) 0%, rgba(58, 107, 182, 0) 100%);
    background-clip: padding-box;
}
body {
    background: hsla(0, 5%, 5%, 1) linear-gradient(to right top, rgba(10%, 0%, 0%, 1), rgba(0%, 0%, 0%, 1)) no-repeat fixed;
}
<input type="text" id="demo" />
<input type="text" />

Upvotes: 1

Related Questions