Gradient borders

Question

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

User · Answer

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:

It isn’t affected by z-index
It can scale easily by just changing the width of the transparent border

Check it out: https://codepen.io/AlexOverbeck/pen/axGQyv?editors=1100

User · Answer

border-image-slice will extend a CSS border-image gradient  This  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     border-bottom  6px solid transparent    border-image  linear-gradient to right  red   yellow     border-image-slice  1

User · Answer

WebKit now  and Chrome 12 at least  supports gradients as border image   -webkit-border-image  -webkit-gradient linear  left top  left bottom  from  00abeb   to  fff   color-stop 0 5   fff   color-stop 0 5   66cc00   21 30 30 21 repeat repeat    Prooflink -- http   www webkit org blog 1424 css3-gradients  Browser support  http   caniuse com  search border-image

User · Answer

I agree with szajmon  The only problem with his and Quentin s answers is cross-browser compatibility   HTML    lt div class  g  gt       lt div gt bla lt  div gt   lt  div gt    CSS    g   background-image  -webkit-linear-gradient 300deg  white  black  white      webkit browsers  Chrome  amp  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  gt  div   background   fff

User · Answer

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       lt div class  fade-out-border  gt  lt  div gt    Usage explained   Formal grammar  linear-gradient      lt angle gt    to  lt side-or-corner gt       lt color-stop gt      lt color-stop gt                                     ---------------------------------   ----------------------------                                  Definition of the gradient line         List of color stops     More here  https   developer mozilla org en-US docs Web CSS linear-gradient

User · Answer

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

User · Answer

Try this  it worked for me    x000D   x000D  div  x000D    border-radius  20px  x000D    height  70vh  x000D    overflow  hidden  x000D    x000D   x000D  div  before  x000D    content      x000D    display  block  x000D    box-sizing  border-box  x000D    height  100   x000D   x000D    border  1em solid transparent  x000D    border-image  linear-gradient to top  red 0   blue 100    x000D    border-image-slice  1  x000D    x000D   lt div gt  lt  div gt  x000D   x000D   x000D    The link is to the fiddle https   jsfiddle net yash009 kayjqve3 1  hope this helps

User · Answer

Webkit supports gradients in borders  and now accepts the gradient in the Mozilla format   Firefox claims to support gradients in two ways    Using border-image with border-image-source   Using border-right-colors  right left top bottom    IE9 has no support

User · Answer

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

User · Answer

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

User · Answer

Gradient Borders from Css-Tricks  http   css-tricks com examples GradientBorder    multbg-top-to-bottom     border-top  3px solid black    background-image  -webkit-gradient linear  0 0  0 100   from  000   to transparent      background-image  -webkit-linear-gradient  000  transparent     background-image        -moz-linear-gradient  000  transparent         -moz-linear-gradient  000  transparent     background-image        -o-linear-gradient  000  transparent         -o-linear-gradient  000  transparent     background-image         linear-gradient  000  transparent         linear-gradient  000  transparent     -moz-background-size  3px 100     background-size  3px 100     background-position  0 0  100  0    background-repeat  no-repeat

User · Answer

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

User · Answer

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

User · Answer

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         http   www cssportal com css3-preview borders htm

User · Answer

Try this  works fine on web-kit   x000D   x000D   border    x000D      width  400px  x000D      padding  20px  x000D      border-top  10px solid  FFFF00  x000D      border-bottom 10px solid  FF0000  x000D      background-image   x000D          linear-gradient  FFFF00   FF0000   x000D          linear-gradient  FFFF00   FF0000  x000D        x000D      background-size 10px 100   x000D      background-position 0 0  100  0  x000D      background-repeat no-repeat  x000D    x000D   lt div class  border  gt Hello  lt  div gt  x000D   x000D   x000D

User · Answer

instead of borders  I would use background gradients and padding  same look  but much easier  more supported  a simple example   x000D   x000D   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  gt  div   background   fff    x000D   lt div class  g  gt       lt div gt bla lt  div gt   lt  div gt  x000D   x000D   x000D    EDIT  You can also leverage the  before selector as  WalterSchwarz pointed out   x000D   x000D  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    x000D   lt div class  circle  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Example for Gradient Border  Using border-image css property  Credits to   border-image in Mozilla   x000D   x000D   grad-border   x000D    height  1px  x000D    width  85   x000D    margin  0 auto  x000D    display  flex  x000D    x000D   left-border   right-border   x000D    width  50   x000D    border-bottom  2px solid  695f52  x000D    display  inline-block  x000D    x000D   left-border   x000D    border-image  linear-gradient 270deg   b3b3b3   fff  1  x000D    x000D   right-border   x000D    border-image  linear-gradient 90deg   b3b3b3   fff  1  x000D    x000D   lt div class  grad-border  gt  x000D     lt div class  left-border  gt  lt  div gt  x000D     lt div class  right-border  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

[css] Gradient borders

Examples related to css

Examples related to gradient