Questions tagged [gradient]

Specifies a range of position-dependent colors, usually used to fill a region.

Specifies a range of position-dependent colors, usually used to fill a region.

enter image description here

4271 questions
58
votes
3 answers

Fade image to transparent like a gradient

I would like to have an image (a background image) to fade to transparent so that content behind it can actually be seen (barely, thanks to transparency). I can achieve it obviously with a PNG image, but I need to ask to my graphic designer to…
Francesco Belladonna
  • 11,361
  • 12
  • 77
  • 147
57
votes
4 answers

Colour points in a plot differently depending on a vector of values

I'm plotting the figure below using R's plot() function. It is a plot of a vector shiftTime of shift in time. I have another vector intensity of the intensity values ranging from ~3 to ~9. I want to color my points in the plot based on those values…
Niek de Klein
  • 8,524
  • 20
  • 72
  • 143
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
56
votes
8 answers

Flutter - How to blend an image with a gradient colour?

I am attempting to replicate a login screen design my designer did for an app. The background image uses a blendMode of softLight, the catch is that the colour it blends with is a gradient colour. Secondly there is actually two layers of different…
Robert Stevens
  • 7,817
  • 3
  • 13
  • 15
54
votes
5 answers

CSS3 gradient rendering issues from transparent to white

I am having issues with cross browser rendering of CSS3 gradients. This is happening when I am trying to create a gradient from transparent colour to white. The file I am using to test with is: http://f.cl.ly/items/0E2C062x3O161b09261i/test.html CSS…
phawk
  • 1,321
  • 1
  • 13
  • 12
53
votes
6 answers

How to convert x,y coordinates to an angle?

Microsoft provide an excellent SVG gradient maker so IE9 can also have "CSS3" gradients (click Custom). I currently utilise their logic for my Fireworks and Dreamweaver extensions to convert gradients to SVG, but I only know how to do it for…
Matt Stow
  • 6,053
  • 6
  • 24
  • 26
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
49
votes
11 answers

Gradient colors in Internet Explorer

I know that Internet Explorer has some proprietary extensions so that you can do things like create divs with a gradient background. I can't remember the element name or it's usage. Does anyone have some examples or links?
Jeremy
  • 44,950
  • 68
  • 206
  • 332
47
votes
4 answers

Fixed gradient background with css

I would like for my page to have a gradient background flowing from top to bottom. I want the background to act like a fixed image in that the gradient stretches from the top of the current browser viewport to the bottom and looks the same as you…
d512
  • 32,267
  • 28
  • 81
  • 107
46
votes
6 answers

How do you remove the default Bootstrap 3 carousel control background gradients?

I'm pretty sure this is the code I need to modify, but for some reason I can't get the gradients to disappear in IE. I want them completely gone! .carousel-control { text-shadow: none; opacity: 1; filter: alpha(opacity=100) } .carousel-control.left…
VSHoward
  • 567
  • 1
  • 4
  • 5
45
votes
3 answers

Calculate the color at a given point on a gradient between two colors?

So this is essentially the method I would like to write (in Objective-C/Cocoa, using UIColors, but I'm really just interested in the underlying math): + (UIColor *)colorBetweenColor:(UIColor *)startColor andColor:(UIColor *)endColor…
blabus
  • 795
  • 2
  • 14
  • 25
42
votes
4 answers

Gradient over img tag using css

I want to place a gradient over an tag. src attribute of the tag is angular-item. For example: I've tried to make css class: .pickgradient { background: -webkit-gradient(linear, left top, left bottom,…
donutello
  • 633
  • 1
  • 5
  • 16
42
votes
3 answers

How to add gradient effect to background color of TextView in a ListView?

In reference to these questions: Adding gradient effect to TextView in a ListView generates NPE How to change color and font on ListView I would like to know how to go about setting the background of a TextView in a ListView with gradient effect? In…
Kazekage Gaara
  • 14,972
  • 14
  • 61
  • 108
41
votes
6 answers

Transparent Background Image with a Gradient

Today I was designing a transparent PNG background that would only sit in the top left of a div, and the rest of the div would maintain a gradient background for all transparent areas of the PNG, and the rest of the div itself. It might be better to…
Will D. White
  • 1,024
  • 5
  • 12
  • 22
41
votes
4 answers

Gradient Text in Flutter

I was wondering if it is possible to create a gradient over text Flutter. There is a gist of text gradient using Dart's ui, but it is kinda long and I was hoping to be simpler.