Gradient line with dashed pattern

Question

I need to create a dashed line with a linear gradient. I managed to create a dashed line using <hr /> and the following styling:

line {
  border: 0px;
  border-bottom: 2px dashed;
}

And I also know that to achieve a gradient I need to do:

background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(black));

@Ela: Have a look at the gradient snippet in my answer here - http://stackoverflow.com/questions/2771171/control-the-dashed-border-stroke-length-and-distance-between-strokes/31315911#31315911. That one uses 4 gradients (one for each side) but you need only one :) — Harry, Sep 10 '15 at 11:32
I have modified the title to clarify your question better (based on your self-answer). Please feel free to rollback if you feel that it is misleading/incorrect. — Harry, Sep 10 '15 at 12:28

Harry · Accepted Answer · 2015-09-10T12:37:16.703

Based on the code in your own answer, it looks like you need a line which is a gradient in itself (from blue to green) and also have dashed pattern. This is not possible to achieve with one gradient image because spaces cannot be introduced in the middle of a gradient.

However, you can achieve the same effect without using any extra elements (real/pseudo) by using background-image stacking like in the below snippet:

.line {
  margin-top: 50px;
  height: 2px;
  background: linear-gradient(to right, transparent 50%, #223049 50%), linear-gradient(to right, #00b9ff, #59d941);
  background-size: 16px 2px, 100% 2px;
}

body{
  background-color: #223049;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="line"></div>

The second gradient in the above snippet is the same as the one in your answer (except the usage of the latest standard cross-browser syntax). The first gradient is the replacement for your hr and it is nothing but a repeating gradient which is transparent for 50% of image's width and the color you need for the other 50%. The background-size of the first gradient image is set as 16px 2px where 16px is the width and 2px is the height. The width of the image determines the width of the dashes. The height (2px) determines the thickness of the line.

I want transparent space between dashes, how can I achieve that? — iamawebgeek, Mar 22 '18 at 11:54
Sorry for necromancy, but this solution worked well for me except for one minor thing. Is it possible to reduce the spacing between the "dots" or the "dashes" ? — Mbotet, Jan 03 '22 at 13:11
Okay figured it out, had to use radial-gradient and had to make sure height and width is equal: `background: radial-gradient(circle at center, transparent 50%, #223049 50%), linear-gradient(to right, #00b9ff, #59d941); background-size: 100px 100px, 100% 100px;` — Adam, Sep 24 '22 at 07:20

score 3 · Answer 2 · answered Sep 10 '15 at 11:57

Thanks for help I finally got it working myself but embedding a dashed line into a div. The <hr/> has the colour of the element I want the line in, giving the effect of "hiding" part of the line. Here is the code, however if someone has a nice answer I'm curious.

.line { 
height: 2px;
background: -webkit-gradient(linear, 0 0, 100% 0, from(#00b9ff), to(#59d941));
}

.dashed {
    border: 0px;
    border-bottom: 2px dashed;
    border-color: #223049;
}

<div class="line">
    <hr class="dashed"/>
</div>

jsFiddle

So you are looking for a gradient where the dashes are black in color and the other goes from blue to green? — Harry, Sep 10 '15 at 12:07

score 0 · Answer 3 · answered Sep 10 '15 at 11:58

Using pseudo-elements you can achieve dashed-border and can customize it also, in any direction(have described for one side in my JSFiddle).

Here's my JSFiddle

HTML

<div class="dashed-border"></div>

CSS

.dashed-border {
  position: relative;
  border-bottom: 3px dashed #fff;
}


.dashed-border::before {
  content:"";
  border-top:3px dashed #FFF;
  position: absolute;
  top:0;
  left:6px;
  right:0;
  width: 100%;
  height: 3px;
  z-index: 2;
}
.dashed-border:after {
   content:"";
   position: absolute;
   bottom: -3px;
   left: -3px;
 }
.dashed-border::after {
   right: -3px;
   height: 3px;
   background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, #1e5799), color-stop(50%, #2989d8), color-stop(51%, #207cca), color-stop(100%, #7db9e8));
   background-image: -webkit-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
   background-image: -moz-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
   background-image: -o-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
   background-image: -ms-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
/* IE10+ */
   background-image: linear-gradient(to right, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
/* W3C */
  }

Hope it will work for you.

Gradient line with dashed pattern

3 Answers3

Linked