Menu
I want to give a div a gradient with multiple color-stops, which IE's filter property does not support. Anyone have a creative workaround to simulate the color stops in IE? I already thought of creating multiple divs right next to each other... anything else?
Thanks!
937
Just as you can declare the background of an element to be a solid color in CSS, you can also declare that background to be a gradient. Using gradients declared in CSS, rather using an actual image file, is better for control and performance.
Angled CSS Linear Gradients Prefixed old syntax : supported by – Chrome 10-25, Firefox 3.6-15, Opera 11.1-11.5, Safari 5.1-6.
To create the most basic type of gradient, all you need is to specify two colors. These are called color stops. You must have at least two, but you can have as many as you want.
Browser Compatibility For Radial Gradients All modern browsers like Chrome, Firefox, Opera, Safari, and Edge support Radial CSS Gradients; while the newer versions provide full support, some older versions provide partial or no support.
Multiple divs with coordinated gradient colors is the best way (short of using images) to create 3+ color gradients. See fiddle below for a working test:
http://jsfiddle.net/Hauhx/
162
I'd recommend you to use a background image as a fallback for browsers (as Opera and IE) that don't support CSS gradients.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
