How to Remove Fade from Gradient in CSS

How to remove fade from gradient in css

If you're looking to remove the fade from blue to white, and have it be blue up until a point, then change to white, have the colors start and end at the same point.

.button{
  width:200px;
  height:50px;
  position:relative;
  top:50px;
  left:200px;
  background:linear-gradient(180deg,white 33%,blue 33%);
  background:-webkit-linear-gradient(180deg,white 33%,blue 33%);
}

<input type="button" id="button" title="button" name="button" class="button" value="button" />

Removing cut-off edge from linear-gradient grid pattern?

Use a repeating-linear-gradient instead and you will have a better control over the grid and you can make it responsive.

You will have a fixed number of row/column that will grow shrink depending the element size:

.box {
  --nc:10; /* Number of columns */
  --nr:6; /* Number of rows    */
  width:80vw;
  margin:auto;
  height:60vh;
  border-top:1px solid;
  border-left:1px solid;
  background:
    repeating-linear-gradient(to right ,transparent 0px calc(100%/var(--nc) - 1px),#000 calc(100%/var(--nc) - 1px) calc(100%/var(--nc))),
    repeating-linear-gradient(to bottom,transparent 0px calc(100%/var(--nr) - 1px),#000 calc(100%/var(--nr) - 1px) calc(100%/var(--nr)));
}

<div class="box">

</div>

Can you create gradients that fade to opacity using CSS or JavaScript?

Yes

for the colors, use rgba(x, y, z, o) where o is the opacity

should work

e.g.

background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0)));

Edit:
For the final value (opacity) 1 is opaque & 0 is transparent

Linear fade out div, content and border (solid at top to transparent at bottom)

Quoting from my answer here:

Check this working demo, and try to add/remove contents from #contents

HTML

<div id="container">
    <div id="contents">
        Some contents goes here
    </div>
    <div id="gradient">
    </div>
</div>

CSS

#container {
    position:relative;
}
#contents {
    background:red;
}
#gradient {
    position:absolute;
    z-index:2;
    right:0; bottom:0; left:0;
    height:200px; /* adjust it to your needs */
    background: url(data:image/svg+xml;base64,alotofcodehere);
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(70%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
}​

This will work almost in any browser which supports opacity (including IE9), and here's the IE8 "rgba" fallback (untested):

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );

To generate your own gradient, visit Colorzilla.

The first stop (0%) must have opacity 0 ( rgba(255,255,255,0); ), then around 70% - do some tests to find what's good for you - add another stop with opacity 1 ( rgba(255,255,255,1); ).

Using CSS, can you apply a gradient mask to fade to the background over text?

I've been wondering this exact same thing. The solution is actually quite simple. Although this is of course quite a modern feature, so you're stuck to browser compatibility.

Webkit can take care of this with a single line of CSS:

-webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))

(The new standardised way of doing it is would use mask-image and linear-gradient using its new syntax. See caniuse.com for mask-image and linear-gradient.)

This would fade out the bottom 10% of whatever element it's applied to, without using even so much as an image. You could add padding-bottom: 50% to make sure that content is only faded when there is more to scroll to.

Source: http://www.webkit.org/blog/181/css-masks/

A Mozilla (Gecko) fallback is a bit trickier though: you can use its 'mask' feature, but this demands a SVG-image. You could try to base64 embed that image into your stylesheet... Use mask-image in Firefox now.

Transparent gradient for top and bottom of background image css

You can have multiple stops in a gradient, so if you wanted the top 10% to fade to transparent and the bottom 10% to fade back, you could do something like this:

background-image: linear-gradient(
    to bottom,
    rgba(64, 64, 64, 1) 0%,
    rgba(64, 64, 64, 0) 10%,
    rgba(64, 64, 64, 0) 90%,
    rgba(64, 64, 64, 1) 100%
);

Demo with <img> tag: http://jsfiddle.net/sh6Hh/ or without the extra <div>: http://jsfiddle.net/sh6Hh/262/

Demo with css background picture: http://jsfiddle.net/sh6Hh/1/

---

Related Topics