A linear gradient is a field of color which smoothly changes from one color to another (or more than two).
Questions tagged [linear-gradients]
1552 questions
349
votes
21 answers
How to do gradient borders in CSS
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?
Mark
- 32,293
- 33
- 107
- 137
145
votes
6 answers
SVG gradient using CSS
I'm trying to get a gradient applied to an SVG rect element.
Currently, I'm using the fill attribute. In my CSS file:
rect {
cursor: pointer;
shape-rendering: crispEdges;
fill: #a71a2e;
}
And the rect element has the correct fill color…
Hrishikesh Choudhari
- 11,617
- 18
- 61
- 74
128
votes
11 answers
Possible to use border-radius together with a border-image which has a gradient?
I'm styling an input field which has a rounded border (border-radius), and attempting to add a gradient to said border. I can successfully make the gradient and the rounded border, however neither work together. It's either rounded with no gradient,…
paulwilde
- 1,329
- 2
- 11
- 9
84
votes
5 answers
CSS gradient checkerboard pattern
I want to create a checkerboard pattern using gradients. I've found an example and modified it to my needs, however it only works with -moz prefix. When I remove the -moz prefix, the pattern is completely different.
How can I make this -moz…
Maciej Krawczyk
- 14,825
- 5
- 55
- 67
76
votes
7 answers
Weird effect when applying transparent border over an element with a gradient background
When applying a transparent border over an element with a linear-gradient as the background, I get a weird effect.
Notice the left and right sides of the element don't have the proper colours (they're some way switched) and are weirdly…
Afonso Matos
- 2,406
- 1
- 20
- 30
57
votes
7 answers
Gradient text color
Is there a generator , or an easy way to generate text like this but without having to define every letter
So something like this:
.rainbow {
background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15,…
StabDev
- 741
- 3
- 7
- 17
53
votes
8 answers
How can I prevent CSS gradient banding?
I started using CSS gradients, rather than actual images, for two reasons: first, the CSS gradient definitely loads faster than an image, and second, they aren't supposed to show banding, like so many raster graphics. I started testing my site on…
John Doe
- 699
- 1
- 7
- 14
47
votes
5 answers
How to Animate Gradients using CSS
I want to move my gradient that has multiple colors smoothly but the problem is that the animation is not smooth. It just changes its position at every step.