CODEWITHSUNDEEP
csslinear-gradients
aphextwix
aphextwix

Reputation: 1858

How to create straight line with same css gradient at both ends?

How would I create the below image using only CSS?

I'm attempting to draw a line with a transparent gradient at either end - here's what I've tried which does not work: 

background-image: -webkit-linear-gradient(left, transparent, #8C8C8C),
                  -webkit-linear-gradient(right, transparent, #8C8C8C);

So at the left and right end of the line the gradient moves inwards.

enter image description here

Upvotes: 3

Views: 4517

Answers (2)

m4n0
m4n0

Reputation: 32255

The various color stop values can help achieve that effect.

Stop the white at 10% and prolong a mix of transparent and gray(increasing) up to 50% and then a mix of gray and transparent(increasing) up to 100%.

.gradient {
  width: 600px;
  height: 1px;
  background: linear-gradient(to right, transparent 10%, gray 50%, transparent 100%);
}
<div class="gradient"></div>

Also, you can play around with the % values to get the exact gradient. For example, your image can be made as accurate as possible by increasing the stop points like below.

.gradient {
  width: 600px;
  height: 1px;
  background: linear-gradient(to right, transparent 10%, gray 20%, gray 90%, transparent 98%, transparent 100%);
}
<div class="gradient"></div>

Upvotes: 4

Harry
Harry

Reputation: 89750

You should just use a single gradient like in the below snippet with the start and end as transparent.

Explanation:

  • transparent 0% means the gradient starts with transparent color
  • #8C8C8C 15% means that between 0% to 15% the gradient's color gradually changes from transparent to #8C8C8C.
  • #8C8C8C 85% means that the gradient's color stays as #8C8C8C from 15% to 85%.
  • transparent 100% means that the gradient's color would again change gradually from #8C8C8C to transparent between 85% - 100%.

The color stops create the illusion as though the gradient is proceeding inwards from either direction. Equal splits make the change look equal on either side.

div {
  background-image: -webkit-linear-gradient(left, transparent 0%, #8C8C8C 15%, #8C8C8C 85%, transparent 100%);
  background-image: linear-gradient(left, transparent 0%, #8C8C8C 15%, #8C8C8C 85%, transparent 100%);
  height: 2px;
}
<div></div>

Upvotes: 8

Related Questions