A CSS linear gradient background element has fuzzy transitions between colours even when the stops are at the same spot.
I have an element with the background defined like so:
background:linear-gradient(to right,
blue, blue 10%,
red 10%, red 30%,
yellow 30%, yellow 40%,
green 40%, green 50%,
black 50%
);
In Firefox, the transitions between the colours are fuzzy. If I use a repeating-linear-gradient the edges are crisp. Both are crisp in Chrome.
I have an example pen here: https://codepen.io/anon/pen/rPVWZE?editors=1100#0
Any ideas on how to fix this?
Here the effect on FF. I drew some pixels to show zoom level:
A workaround:
.linear{
height:100px;
background-image:
linear-gradient(to right, blue 0, blue 100px),
linear-gradient(to right, red 0, red 100px),
linear-gradient(to right, yellow 0, yellow 100px);
background-size:
100px 100px,
100px 100px,
100px 100px;
background-position:
0 0,
100px 0,
200px 0;
background-repeat: no-repeat;
}
<div class = "linear"></div>
Related
I have a bit of a complex layout. Looking for a solution for the text module. Need a dashed border with a trapezoid like shape. The shape has an opaque background and sits on top of the imagery. I have not been able to do a clip path for the trapezoid and keep the gradient dashed border as it clips it off.
clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
border-width: 1px;
border-style: dashed;
border-image: linear-gradient(90deg, #ff7075 0%, #fed42e 17%, #4ec253 33%, #08b2ba 50%, #45559e 65%, #2b3570 83%, #25366c 100%) 1
I am trying to make the entire background of a page look like the image below with CSS, and I'm having difficulty using multiple linear-gradients together. The background has to have thin diagonal stripes with a top-to-bottom color fade that is lighter in the middle and fades to a darker color at the top and bottom.
I have tried a bunch of things and what I have here looks the best so far, but it's not quite right. Here is a jsfiddle showing what I have.
I am okay with the stripes, but the top-to-bottom gradient is definitely off, as the gradient only shows on the transparent stripes. I think what is needed here, is two gradients that overlap somehow to get the effect below, but perhaps there is a better way.
Here is the code from the fiddle in case the link breaks in the future:
/* Stripes */
body {
background: linear-gradient(
-45deg,
#5BABCF 25%,
transparent 25%,
transparent 50%,
#5BABCF 50%,
#5BABCF 75%,
transparent 75%,
transparent
);
background-size: 6px 6px;
height: 100vh;
margin: 0;
padding: 0;
}
/* Color Fade */
html {
background: repeating-linear-gradient(
to bottom,
#051219,
#91B7CA 25%,
transparent 50%,
#91B7CA 75%,
#051219 100%
);
}
Any idea how to go about doing this?
Added opacity to the diagonal stripes in body
body {
background: linear-gradient(
-45deg,
#5BABCF 25%,
transparent 25%,
transparent 50%,
#5BABCF 50%,
#5BABCF 75%,
transparent 75%,
transparent
);
background-size: 6px 6px;
height: 100vh;
margin: 0;
padding: 0;
opacity: 0.2;
}
/* Color Fade */
html {
background: repeating-linear-gradient(
to bottom,
#051219,
#91B7CA 25%,
transparent 50%,
#91B7CA 75%,
#051219 100%
);
}
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.
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>
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>
I'm restyling my current project and found a simple way to fade the left and right edges of my div background by using the following. I've been experimenting trying to edit the radius of the centered circle, to make it smaller. I can't seem to alter it, without the whole gradient style disappearing.
I'm trying to set the yellow area as the background of the text with less gradual fade to transparent. What do I need to do to get more transparent and less colored circle?
background-image: radial-gradient(center center, circle cover, #ffeda3, transparent);
background-image: -o-radial-gradient(center center, circle cover, #ffeda3, transparent);
background-image: -ms-radial-gradient(center center, circle cover, #ffeda3, transparent);
background-image: -moz-radial-gradient(center center, circle cover, #ffeda3, transparent);
background-image: -webkit-radial-gradient(center center, circle cover, #ffeda3, transparent);
The way to resize the radius of a radial gradient is by specifying the color stop percentages. That is, we need to specify where one color has to end and the other color has to start.
In the gradient that you have mentioned in question, no color stop percentage is mentioned and hence each circle that is drawn from the center of the element has a color that progresses from #ffeda3 to transparent.
background-image: radial-gradient(center center, circle cover, #ffeda3, transparent);
Possible Solutions
Now depending on how you want the actual gradient to look like you can use any of the three methods that I have provided in the below snippet:
div.hard-stop {
text-align: center;
background-image: -moz-radial-gradient(center center, circle cover, #ffeda3 30%, transparent 30%);
background-image: -webkit-radial-gradient(center center, circle cover, #ffeda3 30%, transparent 30%);
background-image: radial-gradient(center center, circle cover, #ffeda3 30%, transparent 30%);
}
div.gradual-1 {
text-align: center;
background-image: -moz-radial-gradient(center center, circle cover, #ffeda3, transparent 30%);
background-image: -webkit-radial-gradient(center center, circle cover, #ffeda3, transparent 30%);
background-image: radial-gradient(center center, circle cover, #ffeda3, transparent 30%);
}
div.gradual-2 {
text-align: center;
background-image: -moz-radial-gradient(center center, circle cover, #ffeda3 30%, transparent 35%);
background-image: -webkit-radial-gradient(center center, circle cover, #ffeda3 30%, transparent 35%);
background-image: radial-gradient(center center, circle cover, #ffeda3 30%, transparent 35%);
}
/* Just for demo */
body {
background: black;
}
div{
margin-bottom: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="hard-stop">
Test
Test 2
Test 3
</div>
<div class="gradual-1">
Test
Test 2
Test 3
</div>
<div class="gradual-2">
Test
Test 2
Test 3
</div>
Explanation
There are three different gradients used in the above snippet and below is an explanation of each of them:
Hard-stop Gradient:
background-image: radial-gradient(center center, circle cover, #ffeda3 30%, transparent 30%);
This is a hard-stop gradient. That is, till 30% of the parent element all 1px circles are of color #ffeda3 and all 1px circles after that are transparent. As you can see there is a hard switch over of colors at 30% mark.
Gradual - 1:
background-image: radial-gradient(center center, circle cover, #ffeda3, transparent 30%);
This has a gradual movement till it reaches transparency. The first 1px circle has color #ffeda3 and the color of each 1px circle after it is determined such that at 30% mark color becomes transparent. After 30% the color of the gradient remains as transparent.
Gradual - 2:
background-image: radial-gradient(center center, circle cover, #ffeda3 30%, transparent 35%);
This gradient has color as #ffeda3 from the first 1px circle till 30% of the container. From 30% mark to the 35% mark, color of each 1px circle changes progressively from #ffeda3 to transparent. From 35%, the color of each 1px circle remains as transparent.
How would I make the radius 200px in width and height? I've read that this can be done in pixel units, but every attempt has failed.
background-image: -webkit-radial-gradient(75% 100%, circle farthest-corner, #ffffff, #ff7ae9 33%);
background-image: -o-radial-gradient(75% 19%, circle farthest-corner, #ffffff, #ff7ae9 33%);
background-image: -ms-radial-gradient(75% 19%, circle farthest-corner, #ffffff, #ff7ae9 33%);
background-image: radial-gradient(75% 19%, circle farthest-corner, #ffffff, #ff7ae9 33%)
background-image: -moz-radial-gradient(75% 19%, circle farthest-corner, #ffffff, #ff7ae9 33%);
edit: Updated for modern syntax, I've left the original below for a record of the 2011 syntax
You can set both the radius and position the gradient in pixel values or any other valid length unit.
In the example below circle at 200px 200px is setting the center point of the circle to 200px across and 200px down, this could also be any value accepted by background-position such as left or top.
The next values are the color stops and are comma separated pairs of color length. Again any valid value of color and length would work red 10%, #333 10px and rgb(10,47,10) 1em would all be valid.
Values like px or em are absolute and percentage values would be relative to the gradient container.
.gradient-demo {
width: 500px;
height: 400px;
background: radial-gradient(circle at 200px 200px, #fff 0px, #fff 100px, #ff7ae9 101px);
}
<div class="gradient-demo"></div>
Original Answer:
background-image: -moz-radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px);
background-image: -webkit-radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px);
background-image: -o-radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px);
background-image: -ms-radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px);
background-image: radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px);
In this example the '200px' is the size of the circle, any standard
CSS units such as px, em or percentages are fine.
The '50px 100px' is the position of the centre of the circle, it works
the same way as background-position so values like 'left top' are
fine too.
There are a few online generators that can help you with all the
vendor specific prefixes.
p.s. #Mohsen pixel values are fine, MDN says:
either a percentage between 0% and 100% or a length along the gradient axis
If you click on 'length' it says
The CSS syntax for length is a number followed immediately by a unit. Space between the number and the unit is not allowed.