Each point on the axis is a distinct color; to create a smooth gradient, the linear-gradient() function draws a series of colored lines perpendicular to the gradient line, each one matching the color of the point where it intersects the gradient line.The gradient line is defined by the center of the box containing the gradient image and by an angle. 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. Ein Highlight ist, dass mit Erscheinen der finalen Version endlich auch der Internet Explorer CSS3-Verläufe unterstützen wird.

This third syntax simplified the syntax for linear gradients to:But the new syntax had still had one drawback: it allowed only vertical and horizontal gradients. Nothing you can do short fo using images or waiting for Google to improves their render engine.Hi Marc, thanks for the answer. Example:Thanks for contributing an answer to Stack Overflow! Fügte ich -webkit- bevor linear-gradient beschrieben, der in einem bestimmten, aber immer noch nicht funktioniert ich denke das problem ist im Verlauf der Achse By clicking “Post Your Answer”, you agree to our To subscribe to this RSS feed, copy and paste this URL into your RSS reader. Any one color in the gradient forms a straight line that is perpendicular to the gradient axis. The colors of the gradient are determined by two or more points: the starting point, the ending point, and, in between, optional color-stop points.By adding more color-stop points on the gradient line, you can create a highly customized transition between multiple colors. The source for this interactive example is stored in a GitHub repository. Between 10% and 90% the color transitions from red to blue, however the midpoint of the transition is at the 30% mark rather than 50% as would have happened without the 30% color hint.If two or more color stops are at the same location, the transition will be a hard line between the first and last colors declared at that location. You can move this midpoint to any position between two color stops by adding an unlabelled % color hint between the two colors to indicate where the middle of the color transition should be. Support complet 16. background: -ms-linear-gradient (yellow, blue); The following three gradients are equivalent:By default, if there is no color with a 0% stop, the first color declared will be at that point. I am experiencing an error with a repeating linear gradient that is affecting the quality of rendering in Chrome. share | improve this question. I've been trying use linear-gradient CSS to avoid using an image for a gradient but unfortunately it renders poorly in Chrome with visible banding. However, in Chrome, the edges of each stripe are jagged and look somewhat unimpressive compared to the rendering in FireFox.Take a look at some comparison images at 1x and 5x zoom:In the 5x zoom image, you can see that in FireFox the stripe edges are anti-aliased whereas the anti-aliasing is either not present or very poor in Chrome.I have Fiddle showing the effect, which is very distinctive when running side-by-side in FireFox and Chrome: I am aware of and have attempted the recommendations from prior questions and the web, including adding various CSS tricks to force 3d-acceleration (i.e. Color stops are the colors you want to render smooth transitions among. Yes, I understand that the smoother gradient is due to the dithering, I was just hoping perhaps someone might know of a way to Yeah, it'd be great if -webkit-gradient-dither: on; existed. Where developers & technologists share private knowledge with coworkersProgramming & related technical career opportunitiesyour only way for Chrome is to avoid the same color stop ... so instead of using @TemaniAfif Thank you for that suggestion. Learn more about hiring developers or posting ads with us Both are crisp in Chrome. Anybody can ask a question A color-stop's position can be explicitly defined by using a By default, colors transition smoothly from the color at one color stop to the color at the subsequent color stop, with the midpoint between the colors being the half way point between the color transition.