Stack Overflow
Stack Overflow

Questions tagged [css-gradients]

CSS gradients are new types of image added in the CSS3 Image Module. Using CSS gradients lets you display smooth transitions between two or more specified colors. These are commonly used for subtle shading in background images, buttons, and many other things.

According to MDN CSS-Gradients page

CSS gradients are new types of <image> added in the CSS3 Image Module. Using CSS gradients lets you display smooth transitions between two or more specified colors. This lets you avoid using images for these effects, thereby reducing download time and bandwidth usage. In addition, because the gradient is generated by the browser, objects with gradients look better when zoomed, and you can adjust your layout much more flexibly.

94 questions
275
votes
20 answers

Use CSS3 transitions with gradient backgrounds

I'm trying to transition on hover with css over a thumbnail so that on hover, the background gradient fades in. The transition isn't working, but if I simply change it to an rgba() value, it works fine. Are gradients not supported? I tried using an…
alt
  • 13,357
  • 19
  • 80
  • 120
62
votes
9 answers

Can you add noise to a CSS gradient?

Is it possible to add noise to a gradient in CSS? Here is my code for a radial gradient: body { color: #575757; font: 14px/21px Arial, Helvetica, sans-serif; background-color: #2f3b4b; background: -moz-radial-gradient(center 45deg,…
austin
  • 725
  • 2
  • 7
  • 7
20
votes
4 answers

Smooth CSS gradients

I'm learning how to use CSS gradients. My problem is with top to bottom gradients. You can just see the "stops" in the color changing. This is my CSS code #header { width:1000px; height:250px; background:-moz-linear-gradient(top,…
Isuru
  • 30,617
  • 60
  • 187
  • 303
15
votes
1 answer

Changing the center point of a radial gradient in CSS

I need to make multiple gradients like below: Now see how the center of the grey/white gradient differs, in some cases it come from the center, for some from the left-center, for some from the center-bottom. I used THIS, tool to generate the below…
Alexander Solonik
  • 9,838
  • 18
  • 76
  • 174
8
votes
2 answers

Is this possible to create 2-axis 4 color gradient in css (bilinear gradient)?

My exmaple in JavaScript and . https://codepen.io/KonradLinkowski/pen/QWbjaPr const canvas = document.querySelector('#box') const ctx = canvas.getContext('2d') const interpolate = (value, start, end) => (end - start) * value +…
Konrad
  • 21,590
  • 4
  • 28
  • 64
8
votes
2 answers

Linear gradient and url-image for browser mobile?

I would like to have an image as background and also a CSS linear gradient : background-image: url("/site/grigliatrasparente.png"), linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%); I dont'have problems with desktop browser…
Borja
  • 3,359
  • 7
  • 33
  • 66
6
votes
0 answers

Is it possible to make a background gradient on the :root element extend past overscroll?

I'm trying to make it so that when you scroll past the top and bottom of the page, the background gradient I'm using on the body displays past the edge of the body. Is it possible to do this? I've tried setting background-image and background style…
Gavan
  • 61
  • 2
6
votes
2 answers

CSS Border Image Gradient Not Working in Safari 10

I ran into an issue with Safari 10 and CSS border image gradients. It works in all other browsers, and even in Safari 9. It even shows up in Safari 10 in online simulators. Please see images below: (I guess that's IE 11, not IE 10. Thanks for the…
Kenton de Jong
  • 1,001
  • 4
  • 17
  • 37
5
votes
5 answers

Generating a css gradient with single color

I am trying to generate a gradient using one single color and then varying the brightness or some other related variable. Is it possible to do so ?
Ninja420
  • 3,542
  • 3
  • 22
  • 34
5
votes
3 answers

Background pixelated

I'm looking for a background effect like this (in pure CSS), how can I do this? (zoomed image) Code: html, body { height:100%; background-color:#3D3D3D; display:flex; } div { height: 100px; width:100px; margin:10px…
EyWN
  • 137
  • 7
5
votes
1 answer

How can I set different gradients as background, each time user refreshes?

I'm working on a bootstrap based webpage and in my CSS file I have the following code: body { height: 100%; background: #3a7bd5; /* fallback for old browsers */ background: -webkit-linear-gradient(to left, #3a7bd5 , #3a6073); /* Chrome 10-25,…
user3766930
  • 5,629
  • 10
  • 51
  • 104
4
votes
2 answers

Converting this gradient image to CSS gradients

I'm trying to use CSS to generate the below gradient image. However, I'm struggling with the alignment. You will notice in my snippet the problem. I tried absolute positioning them but that was just making things worse. .gradients { position:…
imvain2
  • 15,480
  • 1
  • 16
  • 21
4
votes
1 answer

CSS angled linear gradient with "nested" gradient

This is what I'm trying to achieve: The light blue lines are just markers. I want an angle from a fixed px from the center (off to the left). And I also want the darker blue on the left to be a gradient too. I can make the angle I need, but I'm…
Dominic
  • 62,658
  • 20
  • 139
  • 163
4
votes
1 answer

Issue with linear gradient on svg text

I am trying to put a linear gradient on svg text, but I'm not sure how to specify the fill color in the text class. While learning how to do this, I found an example on the web so I'm using that, but where I specify fill color for the text (in the…
RTC222
  • 2,025
  • 1
  • 20
  • 53
4
votes
1 answer

CSS background image fade to white

I'm trying to fade in a background image from white without fading the content. This is what I have: .my-container { position: relative; background: white; overflow: hidden; background-repeat: no-repeat; width: 100%; height:…
Jonathan Parker
  • 6,705
  • 3
  • 43
  • 54
1
2 3 4 5 6 7