linear-gradients

My project's creative designer and I have had some amicable disagreements as far as whether it is better to use slices of his comp or rely on the browser's rendering engine to create certain aspects of the user experience. One specific example is with a horizontal "bar" that runs the entire width of the widget. He created a really snazzy gradient that involves several stops of different colors and opacities, and he feels that the small size of the image is preferable or at least comparable to the added lines of CSS code needed to generate the gradient natively. We're already using CSS sprite

I'm using CSS3 and RGBA to create a white-to-transparent gradient: div { background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); background-image: linear-gradient(left, rgba(255, 255, 255, 1),

I have the following CSS:- a.btn.white-grad { background: $lgrey; color: #313149 !important; border: 1px solid #000; border-image-source: linear-gradient(to right, #9c20aa, #fb3570); border-image-slice: 20; float: left; @include font-size(26); margin: 75px 0; } Adding border-radius: 5px doesn't seem to do anything, I figured it's because I'm using border gradient, is there a way for me to achieve the desired 5px border radius at all? You cannot use border-radius with gradient. Here is another idea where you can rely on multiple background and adjust the background-clip : .white-grad {

I have a fixed width div with gradient applied using css. I want to build slider based color picker based on this gradient. When i drag the slider i calculate the percentage position, and i want to get the hex or rgb color code based on this value. My idea was to create an array with the start/stop positions and colors defined, then find two values from this array based on the slider position, then somehow find the color between: this is where i can't move forward. Demo: http://jsfiddle.net/pdu8rpfv/ var gradient = [ [ 0, 'ff0000' ], [ 28, '008000' ], [ 72, '0000ff' ], [ 100, 'ff0000' ] ]; $(

I have the following code: ( Fiddle ) body { background-color: red; } #grad1 { height: 100px; width: 100%; background: linear-gradient(521deg, rgba(138, 138, 138, 0) 50%, rgba(138, 138, 138, 0) 31.9%, #fff 0.1%, #fff 0%); } <div id="grad1"></div> I basically want the width to be responsive and the gradient's shape to be maintained even though the width changes. What I've tried: Set the width to 100% this doesn't work because its an empty div That's about it, I have no other ideas to be honest. I'd appreciate if someone could help. This is what I'm using it for: (the images are just an example

I'm applying a basic linear-gradient like this: background-image: linear-gradient(to top, red, rgba(0,0,0,0)); this behaves as it's supposed to everywhere except in safari where the transparent is rendered as a blackish/greyish color: here's chrome (how it is supposed to be): and here's safari I've tried prefixing it with -webkit- , changing the rgba to rgba(0,0,0,0.001) but it never goes to solid transparent. is this a bug? is there a way to fix this? here's a fiddle https://jsfiddle.net/2Lrp3sv1/2/ This has to do with the way browsers render transparent . For most browsers, transparent ===

Any idea how I can make background-image with linear-gradient to work on IE 11? The following code works fine on IE 10 but doesn't work on IE 11. background-image: url(IMAGE), -ms-linear-gradient(top, #ffffff, #BEE38F); I can make linear-gradient to work on IE 6-9, 11 using the following filter but background image is not displayed in this case. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#BEE38F',GradientType=0 ) I'm open to an ideas. Update: Here's the code I currently have. background-image: url(IMAGE), -webkit-gradient(linear, left top, left

I have come across a weird problem in webkit browsers (Chrome, Opera). Test case: http://sample.easwee.net/gradient-bug/ (check in Chrome or latest Opera) I have two columns wrapped by a container. I'm applying a CSS gradient to create backgrounds for this two columns. The color stop is set to 66% and columns have the same 66% width (using padding to offset the right column). It renders correctly in Firefox - both column layout and gradient stop point match, but in webkit based browsers the color stop is not matching the column width, although I've used 66% . HTML: <div class="special