CODEWITHSUNDEEP
htmlcss
big_smile
big_smile

Reputation: 1523

CSS3 Gradients: How to make a 1px wide line

I want to make a CSS3 gradient that consists of a 1px line.

How can I do this?

I have tried the following code, but the gradient that is produced is too thick:

background-image: linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 50%, rgb(255,255,255) 51%);

(see here)

How can I make the line smaller, so its only 1px wide? The percentage values seem to control the positioning of the line, but no matter how much I adjust them, I can't get it to 1px wide!

(Essentially, I am using the line to act as a 'faux columns' background [i.e. to visually separate a left and right column. (Although, to keep the jsFiddle simple, I have removed the columns)] I know there are other ways of doing columns, but this method is the best for my situation)

EDIT: Just to clarify, this is for a slightly odd use case, where the width has to be 100% and no psudeo-elements can be used.

Upvotes: 3

Views: 12351

Answers (4)

WagonWolf
WagonWolf

Reputation: 21

I had use this earlier, change it according to your need. I mean change colors and angle as you want

background-image: liner-gradient(to bottom, white, white 14%,blue 1%,white 15%);

Upvotes: 0

smulholland2
smulholland2

Reputation: 1163

.style {        
    background-image: -o-linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 50%, rgb(255,255,255) 50.5%);
    background-image: -moz-linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 50%, rgb(255,255,255) 50.5%);
    background-image: -webkit-linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 0%, rgb(255,255,255) 50.5%);
    background-image: linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 50%, rgb(255,255,255) 50.5%);
}

You are not dealing with pixels, you are using percentages. So 1% of your width, which must be 200 is 2px. (I think that is why this works, maybe I'm wrong.) You can use percentages decimals, so .5% == 1px.

Upvotes: 3

Derek
Derek

Reputation: 967

If you don't care about IE8 (which you probably don't if you're using gradients) you can use calc().

background-image: linear-gradient(left, transparent 50%, rgb(255,255,255) 50%, rgb(255,255,255) calc(50% + 1px), transparent calc(50% + 1px));

This is will work with any width element, whereas just using percentages will break down on smaller and wider elements.

Upvotes: 6

Ana
Ana

Reputation: 37169

/* Opera Mobile */
background: -o-linear-gradient(left, #d1d1d1 1px, white 1px);
/* Firefox for Android */
background: -moz-linear-gradient(left, #d1d1d1 1px, white 1px);
/* WebKit browsers */
background: -webkit-linear-gradient(left, #d1d1d1 1px, white 1px);
/* new syntax: IE10, Firefox, Opera */
background: linear-gradient(90deg, #d1d1d1 1px, white 1px);
background-position: 100% 0;
background-repeat: repeat-y;
background-size: 50%;

demo

[I used 2px instead of 1px in the demo as 1px was not visible. I only tested in Chrome though.]

You should always put the unprefixed version last. There is no need for -ms-linear-gradient. IE10 now supports the standard syntax with no prefix and IE9 doesn't support gradients at all.

Upvotes: 8

Related Questions