I'm trying to apply a gradient to a border, I thought it was as simple as doing this:
border-color: -moz-linear-gradient(top, #555555, #111111);
But this does not work.
Does anyone know what is the correct way to do border gradients?
I'm trying to apply a gradient to a border, I thought it was as simple as doing this:
border-color: -moz-linear-gradient(top, #555555, #111111);
But this does not work.
Does anyone know what is the correct way to do border gradients?
The border-image
property can accomplish this. You'll need to specify border-style
and border-width
too.
.border {
border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1;
border-radius: 5px; /* this doesn't work */
border-width: 4px;
border-style: solid;
padding: 5px;
}
<p class="border">border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1</p>
Read more on MDN.
border: solid; border-image: linear-gradient(to top, red, blue) 1 / 5px;
jsfiddle: border-image with linear-gradient
Instead of borders, I would use background gradients and padding. Same look, but much easier.
A simple example:
.g {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(14, 173, 173)), color-stop(0.67, rgb(0, 255, 255)));
background-image: -moz-linear-gradient(center bottom, rgb(14, 173, 173) 33%, rgb(0, 255, 255) 67%);
padding: 2px;
}
.g>div {
background: #fff;
}
<div class="g">
<div>bla</div>
</div>
You can also leverage the ::before
selector as Walter Schwarz pointed out:
body {
padding: 20px;
}
.circle {
width: 100%;
height: 200px;
background: linear-gradient(to top, #3acfd5 0%, #3a4ed5 100%);
border-radius: 100%;
position: relative;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
.circle::before {
border-radius: 100%;
content: '';
background-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
top: -10px;
left: -10px;
bottom: -10px;
right: -10px;
position: absolute;
z-index: -1;
}
<div class="circle"></div>
border-image-slice
will extend a CSS border-image gradientThis (as I understand it) prevents the default slicing of the "image" into sections - without it, nothing appears if the border is on one side only, and if it's around the entire element four tiny gradients appear in each corner.
body{
border: 16px solid transparent;
border-image: linear-gradient(45deg, red , yellow);
border-image-slice: 1;
height: 120px;
border-radius: 10px; /* will have no effect */
}
border-radius
, the border-radius gets ignored :(
Mozilla currently only supports CSS gradients as values of the background-image property, as well as within the shorthand background.
— https://developer.mozilla.org/en/CSS/-moz-linear-gradient
Example 3 - Gradient Borders
border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;
You can achieve this without removing the border radius with background, background-clip, and background-origin:
<style>
.border-gradient-rounded {
/* Border */
border: 4px solid transparent;
border-radius: 20px;
background:
linear-gradient(to right, white, white),
linear-gradient(to right, red , blue);
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
/* Other styles */
width: 100px;
height: 40px;
padding: 12px;
}
</style>
<div class="border-gradient-rounded">
Content
</div>
Basically, this positions the white background over the gradient background, clips the white background from the inner border, and clips the gradient background from the outer border. This is why you need to define the border as solid transparent
.
Credit to Method 2 from this dev.to post.
Try this, works fine on web-kit
.border {
width: 400px;
padding: 20px;
border-top: 10px solid #FFFF00;
border-bottom:10px solid #FF0000;
background-image:
linear-gradient(#FFFF00, #FF0000),
linear-gradient(#FFFF00, #FF0000)
;
background-size:10px 100%;
background-position:0 0, 100% 0;
background-repeat:no-repeat;
}
<div class="border">Hello!</div>
It's a hack, but you can achieve this effect in some cases by using the background-image to specify the gradient and then masking the actual background with a box-shadow. For example:
p {
display: inline-block;
width: 50px;
height: 50px;
/* The background is used to specify the border background */
background: -moz-linear-gradient(45deg, #f00, #ff0);
background: -webkit-linear-gradient(45deg, #f00, #ff0);
/* Background origin is the padding box by default.
Override to make the background cover the border as well. */
-moz-background-origin: border;
background-origin: border-box;
/* A transparent border determines the width */
border: 4px solid transparent;
border-radius: 8px;
box-shadow:
inset 0 0 12px #0cc, /* Inset shadow */
0 0 12px #0cc, /* Outset shadow */
inset -999px 0 0 #fff; /* The background color */
}
From: http://blog.nateps.com/the-elusive-css-border-gradient
Try the below example:
.border-gradient {
border-width: 5px 5px 5px 5px;
border-image: linear-gradient(45deg, rgba(100,57,242,1) 0%, rgba(242,55,55,1) 100%);
border-image-slice: 9;
border-style: solid;
}
Try this, it worked for me.
div{
border-radius: 20px;
height: 70vh;
overflow: hidden;
}
div::before{
content: '';
display: block;
box-sizing: border-box;
height: 100%;
border: 1em solid transparent;
border-image: linear-gradient(to top, red 0%, blue 100%);
border-image-slice: 1;
}
<div></div>
The link is to the fiddle https://jsfiddle.net/yash009/kayjqve3/1/
Webkit supports gradients in borders, and now accepts the gradient in the Mozilla format.
Firefox claims to support gradients in two ways:
IE9 has no support.
I agree with szajmon. The only problem with his and Quentin's answers is cross-browser compatibility.
HTML:
<div class="g">
<div>bla</div>
</div>
CSS:
.g {
background-image: -webkit-linear-gradient(300deg, white, black, white); /* webkit browsers (Chrome & Safari) */
background-image: -moz-linear-gradient(300deg, white, black, white); /* Mozilla browsers (Firefox) */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', gradientType='1'); /* Internet Explorer */
background-image: -o-linear-gradient(300deg,rgb(255,255,255),rgb(0,0,0) 50%,rgb(255,255,255) 100%); /* Opera */
}
.g > div { background: #fff; }
filter
to support IE for such minor thing, just use a solid border.
Commented
Mar 16, 2012 at 19:06
!important
. Now, Alohci, your turn explaining why as well :)
Commented
Dec 11, 2012 at 3:08
Example for Gradient Border
Using border-image css property
Credits to : border-image in Mozilla
.grad-border {
height: 1px;
width: 85%;
margin: 0 auto;
display: flex;
}
.left-border, .right-border {
width: 50%;
border-bottom: 2px solid #695f52;
display: inline-block;
}
.left-border {
border-image: linear-gradient(270deg, #b3b3b3, #fff) 1;
}
.right-border {
border-image: linear-gradient(90deg, #b3b3b3, #fff) 1;
}
<div class="grad-border">
<div class="left-border"></div>
<div class="right-border"></div>
</div>
Another hack for achieving the same effect is to utilize multiple background images, a feature that is supported in IE9+, newish Firefox, and most WebKit-based browsers: http://caniuse.com/#feat=multibackgrounds
There are also some options for using multiple backgrounds in IE6-8: http://www.beyondhyper.com/css3-multiple-backgrounds-in-non-supportive-browsers/
For example, suppose you want a 5px-wide left border that is a linear gradient from blue to white. Create the gradient as an image and export to a PNG. List any other CSS backgrounds after the one for the left border gradient:
#theBox { background: url(/images/theBox-leftBorderGradient.png) left no-repeat, ...; }
You can adapt this technique to top, right, and bottom border gradients by changing the background position part of the background
shorthand property.
Here is a jsFiddle for the given example: http://jsfiddle.net/jLnDt/
Here's a gradient border with transparent background that works with border-radius
.gradient-border {
border-radius: 999px;
padding: 10px 3rem;
display: inline-block;
position: relative;
background: transparent;
border: none;
}
.gradient-border::before {
content: "";
position: absolute;
inset: 0;
padding: 2px;
border-radius: 9999px;
background: linear-gradient(87.36deg, blue 6.42%, red 84.24%),
linear-gradient(0deg, #FFFFFF, #FFFFFF);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
Live demo: https://jsfiddle.net/jbernier/0eypxc74/1/
For cross-browser support you can try as well imitate a gradient border with :before
or :after
pseudo elements, depends on what you want to do.
Since we cannot add border-radius when we use the border-image, I was able to solve the problem by using a trick as suggest by @NFTMaster as following:
background: linear-gradient(white, white) padding-box,
linear-gradient(to right, darkblue, darkorchid) border-box;
border-radius: 50em;
border: 4px solid transparent;
i found this to be working well using tailwind (added this to global index.css):
.gradient-border {
@apply relative;
}
.gradient-border::before {
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
@apply content-[""] rounded-xl p-[1.5px] inset-0 absolute
bg-gradient-to-tl
from-slate-500/40
via-transparent
to-slate-500/40
}
then use the gradient-border on the element you need this is equivalent to:
.gradient-border {
position: relative;
}
.gradient-border::before {
content: "";
border-radius: 12px;
padding: 2px;
inset: 0;
position: absolute;
background: linear-gradient(45deg, black, transparent, black);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
}
.some-other-styling {
width: 200px;
height: 50px;
}
<div class="gradient-border some-other-styling"/>
try this code
.gradientBoxesWithOuterShadows {
height: 200px;
width: 400px;
padding: 20px;
background-color: white;
/* outer shadows (note the rgba is red, green, blue, alpha) */
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
/* rounded corners */
-webkit-border-radius: 12px;
-moz-border-radius: 7px;
border-radius: 7px;
/* gradients */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5));
background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%);
}
or maybe refer to this fiddle: http://jsfiddle.net/necolas/vqnk9/
Here's a nice semi cross-browser way to have gradient borders that fade out half way down. Simply by setting the color-stop to rgba(0, 0, 0, 0)
.fade-out-borders {
min-height: 200px; /* for example */
-webkit-border-image: -webkit-gradient(linear, 0 0, 0 50%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image: -webkit-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
-moz-border-image: -moz-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
-o-border-image: -o-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
border-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0) 50%) 1 100%;
}
<div class="fade-out-border"></div>
Usage explained:
Formal grammar: linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
\---------------------------------/ \----------------------------/
Definition of the gradient line List of color stops
More here: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
Using HTML & CSS
<div class="gradientBorder">
<div class="gradientBorderModule">
Hello Gradient Border
</div>
</div>
.gradientBorder {
padding: 1rem;
position: relative;
background: linear-gradient(to right, red, yellow);
padding: 3px;
}
.gradientBorderModule {
background: black;
color: white;
padding: 2rem;
}
Using Tailwind CSS
<div class="rounded-xl bg-gradient-to-r from-red-500 to-yellow-500 p-[0.1rem] relative">
<div class="flex rounded-xl bg-black text-white p-1">
Hello Gradient Border
</div>
</div>
There is a nice css tricks article about this here: https://css-tricks.com/gradient-borders-in-css/
I was able to come up with a pretty simple, single element, solution to this using multiple backgrounds and the background-origin property.
.wrapper {
background: linear-gradient(#222, #222),
linear-gradient(to right, red, purple);
background-origin: padding-box, border-box;
background-repeat: no-repeat; /* this is important */
border: 5px solid transparent;
}
The nice things about this approach are:
Check it out: https://codepen.io/AlexOverbeck/pen/axGQyv?editors=1100
Button Border Gradient using pseudo-element
.btn-wrap{
position: relative;
margin-left: 10px;
border-radius: 7px;
width:fit-content;
margin:50px;
}
.btn-wrap::before{
content: "";
position: absolute;
left: -3px;
top: -2.5px;
border-radius: 10px;
z-index: -1;
background: linear-gradient(90deg, rgba(201, 134, 34, 1) 0%, rgba(253, 227, 157, 1) 50%, rgba(227, 148, 15, 1) 100%);
width: calc(100% + 6px);
height: calc(100% + 5px);
}
.btn{
margin: 0px;
background-color: #4c0e0e;
border-radius: 10px;
color: #eabb4c;
padding: 10px 20px;
border:none;
font-size:20px;
}
<div class="btn-wrap">
<button class="btn">Nomination</button>
</div>
Try this which supports transparent background and rounded corner not that concise though.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<mask id="cut-off-center">
<rect x="0" y="0" rx="2" ry="2" width="78" height="28" fill="white"/>
<rect x="1" y="1" rx="2" ry="2" width="76" height="26" fill="black"/>
</mask>
<linearGradient id="border">
<stop offset="0" stop-color="rgba(0, 164, 255, 1)"/>
<stop offset="1" stop-color="rgba(0, 127, 216, .47)"/>
</linearGradient>
<linearGradient id="background">
<stop offset="0" stop-color="#72C5FF"/>
<stop offset="1" stop-color="#0090FE"/>
</linearGradient>
</defs>
<rect x="0" y="0" rx="2" ry="2" width="78" height="28" fill="url(#border)" mask="url(#cut-off-center)"/>
<rect x="1" y="1" rx="2" ry="2" width="76" height="26" fill="url(#background)" fill-opacity="0.3"/>
</svg>
also you can use it as background image.
.box {
width: 78px;
height: 28px;
color: orange;
text-align: center;
line-height: 28px;
background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiPgogICAgPGRlZnM+CiAgICAgICAgPG1hc2sgaWQ9ImN1dC1vZmYtY2VudGVyIj4KICAgICAgICAgICAgPHJlY3QgeD0iMCIgeT0iMCIgcng9IjIiIHJ5PSIyIiB3aWR0aD0iNzgiIGhlaWdodD0iMjgiIGZpbGw9IndoaXRlIi8+CiAgICAgICAgICAgIDxyZWN0IHg9IjEiIHk9IjEiIHJ4PSIyIiByeT0iMiIgd2lkdGg9Ijc2IiBoZWlnaHQ9IjI2IiBmaWxsPSJibGFjayIvPgogICAgICAgIDwvbWFzaz4KICAgICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJvcmRlciI+CiAgICAgICAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0icmdiYSgwLCAxNjQsIDI1NSwgMSkiLz4KICAgICAgICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSJyZ2JhKDAsIDEyNywgMjE2LCAuNDcpIi8+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJhY2tncm91bmQiPgogICAgICAgICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM3MkM1RkYiLz4KICAgICAgICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMDA5MEZFIi8+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHJ4PSIyIiByeT0iMiIgd2lkdGg9Ijc4IiBoZWlnaHQ9IjI4IiBmaWxsPSJ1cmwoI2JvcmRlcikiIG1hc2s9InVybCgjY3V0LW9mZi1jZW50ZXIpIi8+CiAgICA8cmVjdCB4PSIxIiB5PSIxIiByeD0iMiIgcnk9IjIiIHdpZHRoPSI3NiIgaGVpZ2h0PSIyNiIgZmlsbD0idXJsKCNiYWNrZ3JvdW5kKSIgZmlsbC1vcGFjaXR5PSIwLjMiLz4KPC9zdmc+')
}
<div class="box">text</div>