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, circle closest-corner, #2f3b4b 0%, #3e4f63 100%);
background: -webkit-gradient(radial, center center, 10, center center, 900, from(#2f3b4b), to(#3e4f63));
}
What would I add to that to have noise on top of it, to give it texture?
This is by far the most hassle free and best way to implement this. It is purely CSS and very very simple to do, no extra files - nothing. Ok, it's not the best way possible, but it works very well, very reliable (never failed when testing across very old browsers) and very fast to load.
Found it a few months ago, and used it ever since, simply copy and paste this code in to your CSS.
background-image: url(data:image/png;base64,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);
Then add your background color
background-color:#0094d0;
Demo: JSFiddle
Source:
https://coderwall.com/p/m-uwvg
Creating Textures (Noise) Using SVG Filters & CSS Gradients
You want noise in your gradient? You're in luck!
Perlin noise is a type of gradient noise. The SVG standard specifies a filter primitive called <feTurbulence>, which implements the Perlin function. It allows the synthesis of artificial textures like clouds or marble—the noise you want.
Step 1: Define an SVG Graphic
Create a small SVG file called noise.svg.
<svg
xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
width='300' height='300'>
<filter id='n' x='0' y='0'>
<feTurbulence
type='fractalNoise'
baseFrequency='0.75'
stitchTiles='stitch'/>
</filter>
<rect width='300' height='300' fill='#fff'/>
<rect width='300' height='300' filter="url(#n)" opacity='0.80'/>
</svg>
This graphic defines two rectangles. The first is filled with a solid color. The second is translucent with the noise filter applied. The second rectangle is overlayed on the first to provide a noise effect.
SVG Options
Fist and most obvious is that you can change the dimensions of the graphic. However, the CSS background-repeat property can be used to fill an element, thus 300×300 should suffice.
The filter's type attribute can be fractalNoise or turbulence, which specifies the filter function. Both provide a different visual, but in my opinion, the noise filter is a little more subtle.
The filter's baseFrequency attribute can range from 0.5–0.9 to provide a course to fine texture, respectively. This range is visually optimal for either filter in my opinion.
The first rectangle's fill can be changed to provide a different base color. Later, however, we essentially combine this color with a translucent CSS gradient, which also defines a color(s). So white is a good starting point here.
The second rectangle's opacity can range from 0.2–0.9 to set the filter intensity, where a higher number increases the intensity.
At this point, you could tweak the aforementioned options, set this noise graphic as a background image via CSS, and call it a day. But if you want a gradient, like the OP, go to Step 2.
Step 2: Apply a CSS Gradient
Using the background-image property, you can set the SVG noise graphic as the background on any element and overlay a gradient. In this example, I'll apply the noise graphic to the entire body and overlay a linear gradient.
body {
/* white to black linear noise gradient spanning from top to bottom */
background:
linear-gradient(rgba(255,255,255,.5), rgba(0,0,0,.5)),
url('noise.svg');
}
The linear-gradient() function creates a pseudo image, which is stacked on top of noise.svg. The result is a translucent gradient with our noise showing through it.
CSS Options
First, and most obvious, is that the defined gradient colors can be changed. However, if you want a solid color without a gradient, make the two end-point colors equal. The benefit is that you can use the same noise graphic with or without a gradient throughout a site or among projects.
Multiple images, created with the *-gradient() functions, can be overlayed on the noise graphic and more than two color parameters and angles can be specified in a single gradient function to provide all kinds of cool visuals.
The opacity of the gradient parameters—i.e. rgba() and hsla()—can be increased to intensify the defined color and reduce the noise level. Again, 0.2–0.9 is an ideal range.
Conclusion
This is a highly customizable and very light-weight (~400 bytes) solution that allows you to simply define noise of any color or gradient. Although there are several knobs to turn here, this is only the beginning. There are other SVG filter primitives, such as <feGaussianBlur> and <feColorMatrix>, which can provide additional results.
There's no current way in css to add 'noise' to a background.
An alternative solution would be to create a transparent noise png in your graphic editor. Then apply that graphic as a background to a <div>. You would then need to place that <div> over the entire area of the <body> which should then give an appearance of a gradient with noise.
For the sake of novelty, here is some pure CSS noise without using a data URI:
#box {
width:250px;
height:250px;
position:relative;
background-size:55px 10px;
background-repeat: repeat;
background-image: -webkit-repeating-radial-gradient(1% 21%, closest-corner, rgba(255,0,255,.5), rgba(0,255,255,.5), rgba(0,0,0,1) 1.7%), -webkit-repeating-radial-gradient(51% 51%, closest-corner, rgba(255,255,255,1), rgba(255,255,255,1), rgba(0,255,0,1) 10%);
}
#box::before {
content:'';
width:100%;
height:100%;
position:absolute;
mix-blend-mode:exclusion;
background-size:12px 22px;
background-repeat: repeat;
background-image: -webkit-repeating-radial-gradient(61% 21%, closest-corner, rgba(255,255,255,1), rgba(0,255,0,.5), rgba(3,0,255,1) 20%), -webkit-repeating-radial-gradient(91% 51%, closest-corner, rgba(255,255,255,1), rgba(255,255,1,.5), rgba(055,255,255,1) 20%);
left:0;
z-index:998;
}
#box::after {
content:'';
width:100%;
height:100%;
position:absolute;
mix-blend-mode:exclusion;
background-size:15px 13px;
background-repeat: repeat;
background-image: -webkit-repeating-radial-gradient(21% 21%, closest-corner, rgba(255,255,255,1), rgba(0,0,255,.5), rgba(3,0,255,1) 20%);
left:0;
top:0;
z-index:999;
}
<div id="box"></div>
Some more information about how this was created: http://jollo.org/LNT/public/css-noise.html
While this doesn't qualify as true noise, a pure CSS3 approach would be using multiple repeating-linear-background selectors, which are often used in pattern generators.
Here are a few examples:
http://jsfiddle.net/andrewodri/eMB6E/
http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/
http://lea.verou.me/css3patterns/
With some right combination of backgrounds, angles, color stops, and transparency, a reasonable noise-like effect should be achievable :)
Hope that sets you in the right direction anyways...
Yes, there's currently no CSS-based approach for noise textures. If you're hell-bent on a programmatic (rather than image-based) approach, though, you could try using HTML5 canvas. There's a tutorial here on how to generate noise using JavaScript --> Creating Noise in HTML5 Canvas
However, doing the Canvas approach will result in a much slower experience for your visitors, because A) JavaScript is an interpreted language, and B) writing graphics using JS is extra slow.
So, unless you're trying to make a point by using HTML5, I'd stick with an image. It'll be faster (for you to make and for your users to load), and you'll have a finer degree of control over the appearance.
It's 2023, so here's my answer: the best option would be with a lightweight inline SVG filter and one CSS declaration... which includes the background gradient. No external files, no base64-ing anything. Plus it does a good job of preserving the non-grainy gradient as it doesn't mess up with its contrast or brightness.
The SVG filter would look as follows:
<svg width='0' height='0'>
<filter id='grainy' x='0' y='0' width='100%' height='100%'>
<feTurbulence type='fractalNoise' baseFrequency='.537'/>
<feColorMatrix type='saturate' values='0'/>
<feBlend in='SourceGraphic' mode='multiply'/>
</filter>
</svg>
The CSS code would look as follows:
background: filter(radial-gradient(circle, red, tan), url(#grainy))
What's the catch?
Well, it doesn't really work anywhere at this point (early January 2023), though it should soon start working in Safari. Safari is the only browser to have implemented the filter() function, which allows us to only apply a filter on a background-image layer, without affecting the element's text content or descendants. Right now, even in Safari, it only works on url() images, though it should soon work on CSS gradients as well.
We can still do this and it works cross-browser:
background: radial-gradient(circle, mediumturquoise, darkslateblue);
filter: url(#grainy)
live demo
However, as mentioned above, this filter affects the entire element it's set on, including descendants and text content.
In order to avoid that, we need to move the background and filter declarations on a pseudo, absolutely positioned, behind its parent's content, covering the area of its entire parent - live demo.
This is easily doable and cross-browser, but it would still be nicer to have support for the filter() function, not use up a pseudo just for this and reduce the CSS needed for this to ~15% of what we have to write now with this workaround.
So here are the bug links for this in the other browsers:
Chrome
Firefox
One more thing: if you don't really need the graininess, it's just a nice to have visual enhancement, you could store the gradient in a --grad custom property and have:
div {
--grad: radial-gradient(circle, mediumturquoise, darkslateblue);
background: var(--grad);
#supports (background: filter(conic-gradient(red, tan), blur(1px))) {
background: filter(var(--grad), url(#grainy))
}
}
For anyone interested, breaking down the SVG filter:
this svg only exists to contain the filter, it won't actually be used to display anything, so we zero its dimensions (and ideally also get it out of the flow with position: absolute in the CSS); no other attributes on it are necessary when it's inline (if you want to move it to an external file, you'll have to add xmlns='http://www.w3.org/2000/svg')
the filter obviously needs an idto be referenced, but by default, the filter effect will also spill (relevant for feTurbulence) outside the the element it's applied to by 10% in every direction (default values for x and y are -10% and for width and height are 120%), so we want to restrict it to just the element's area, from 0% to 100% along both axes (alternatively if you don't feel like setting all those attributes, I guess you could set clip-path: inset(0) in the CSS; note that overflow: hidden won't cut it as that only hides the element's content spilling outside its padding-box, but not graphical effects on the actual element, such as those produced by a filter)
first filter primitive creates a noise layer; I don't really understand how this works - there's this article which a lot of people have recommended, but it loses me once it goes from 1D to 2D; what I have noticed is that it's better to switch from the default type value (turbulence) to fractalNoise and that the smaller the baseFrequency value is, the finer the graininess of the noise is (also, don't use integers for this - use 7.01, but not 7)
second filter primitive completely desaturates its input (equivalent to the effect of grayscale(1) or saturate(0)); since we haven't explicitly specified an input, it defaults to using the result of the previous filter primitive - the noise layer; to do this, it switches from the default type for feColorMatrix (which is matrix) to saturate and sets values to 0 (if you have a good mental image of the HSL model/ bicone, you'll know that a saturation of 0% means we always have a grey; how light or how dark, that depends on the lightness, the 'L' in "HSL")
third and final filter primitive blends the desaturated noise with the element the filter is applied on; feBlend takes two inputs, one of which is set to 'SourceGraphic' (note those capitals matter!), while the other one defaults to using the result of the previous filter primitive; finally, the mode we use is multiply (this multiplies the % RGB values of the two layers, pixel by pixel)
This is all that's needed for the filter. There's nothing in there that you don't need.
A lot of times, SVG generators spit out a lot of unnecessary attributes, but this was handwritten and I only included what's really needed for it to work cross-browser.
Building on top of Clint Pachl's answer, I used CSS's mix-blend-mode to get a grainier effect and to selectively punch up the colors of that make up the gradient.
See https://jsfiddle.net/jimmmy/2ytzh30w/ for example code.
Update: I wrote an article about it in CSS-Tricks: Grainy Gradients
It is not possible (even if it was, it'd take a crapton of code tricks to do so) to generate noise textures using CSS alone. There aren't any new CSS3 properties that provide that sort of effect out of the box. A much quicker solution is to use a graphic editor such as Photoshop to do that.
Related
I'm pretty positive this can't be done, but I figured I'd check before moving on to Plan B. I have a <header> that contains a photograph, which can be switched at will by the user whose left edge fades to transparent to reveal the remainder of the underlying color or pattern or whatever... whatever it is, it's also user-supplied so it could be anything.
In to order to retain the design while allowing users without knowledge of or access to an image editor that would apply the mask to the photo they want to use, I'm trying to find a way to use an unedited texture/color along with an unedited photograph to produce the following effect:
All I can come up with right now is to manually apply a 100% white to 0% white mask to the left edge of the photo in Photoshop. But like I said, this can't be done by my target user - I need for them to be able to upload a new image and keep the image-fading-into-background effect.
I have done this successfully with 1 of the 2 elements being a solid background with a pseudo-element as in this CodePen (extremely rough - for proof of concept only). But again, I need BOTH the contents or background of .inner and the background of .outer to be user-supplied (and possibly changed in response browser events). The same Pen also shows a version using -webkit-mask-image rather than the pseudo element, which gets it closer, but is lacking IE support.
Without extensive SVG coding (it's not worth the time -- for this use case -- to keep the variable background pattern/image), is there a way (preferably PURE CSS) to achieve this masking effect without having to edit either image?
As said by #Bryce Howitson you can use mask
.box {
width:300px;
height:200px;
position:relative;
}
.box:before,
.box:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-image:url(https://picsum.photos/id/2/800/800);
background-size:cover;
background-position:center;
}
.box:after {
background-image:url(https://picsum.photos/id/13/800/800);
-webkit-mask:linear-gradient(to right,#fff 35%,transparent 70%);
mask:linear-gradient(to right,#fff 35%,transparent 70%);
}
<div class="box">
</div>
¯_(ツ)_/¯
IF IE support is a hard requirement, you're pretty much out of luck using pure CSS for masking. You could simply dump support for IE and then proceed with mask-image since it even works in MS Edge. Only your own usage stats can tell you if this is a good idea.
Option 2
Dump the second image and use a gradient overlay of the main image to a flat color background. Which you probably don't want to do, but it's a decent progressive enhancement option.
Option 3
Its a lot of work but you could use Canvas and Javascript to fake it. The basic idea is to slice the main image into individual canvas elements. One element for each pixel wide the image is and then draw the source image into the canvas elements with the correct offset. The slices then stack side by side in the canvas re-making the full image. At this point, you can change the opacity of each slice until you get a gradient fade effect.
For example, if the image fades out to the right side, the furthest right slice is 0% opaque, the next to the left is 1%, then next is 2%, etc
This is untested, but something along these lines except this fades evenly from left opaque to right trasnparent:
var theCanvas = document.getElementById('canvasContainer');
fadeImage = theCanvas.getContext('2d');
for (var i = 0; i < sourceImage.width; i++) {
fadeImage.globalAlpha = (sourceImage.width - i) / sourceImage.width;
fadeImage.drawImage(sourceImage, i, 0, 1, sourceImage.height, i, 0, 1, sourceImage.height);
}
Following guides such as this, I have successfully created a monotone image from a full color JPG.
This is the CSS code I am currently using to convert an image to blue monotone:
filter: grayscale(100%) brightness(200%) sepia(100%) hue-rotate(-180deg) saturate(200%) contrast(1);
What I would like to do from here is lay that image on top of another so that where the image is white, it is transparent. Or at least, close enough.
I have tried using mix-blend-mode of which it seems the darken parameter is the closest to what I'm after. However, the problem with mix-blend-mode is that it doesn't just act on one image. It takes values from both top and bottom image and what is visible or not results from the relationship between the two. This creates unpredictable results when trying to create a general system in which the top and bottom image may be any combination of light and dark.
Also, I'm a little concerned about browser support for mix-blend-mode.
I have created a fiddle here that shows the stage I'm at now.
This may ultimately be impossible, but, is there any way I can at an image to be transparent depending on how white the pixels are, regardless of the contents of the image underneath? Is there a way I can get close to this effect?
Just porting my comment to an answer since the suggestion worked: you should be using mix-blend-mode: multiply. This blend mode will actually make white pixels completely transparent because of how it works—it multiplies the luminance levels of the current layer's pixels (e.g. your hello kitty overlay) with the pixels in the layers below (e.g. your background image).
Multiply blend mode multiplies the numbers for each pixel of the top layer with the corresponding pixel for the bottom layer. The result is a darker picture.
Source: Wikipedia
Since white multiplied with anything produces white (think along the lines of multiplying 0 with any number), you are guaranteed to have 100% transparency and no color changes where the overlaying pixels are white.
The next question is how you should increase the contrast of the image so that even the coloured parts of your figure will turn out white. This is as simple as pumping the brightness up to a sufficiently high level (I've used 500%, arbitrarily determined), and it seems to work:
See proof-of-concept fiddle below:
img {
position: absolute;
top: 0;
left: 0;
}
.blue {
filter: grayscale(100%) brightness(600%);
mix-blend-mode: multiply;
}
<img src="http://i.dailymail.co.uk/i/pix/2017/10/14/12/4551406D00000578-4979962-image-a-1_1507978862213.jpg">
<img class="blue" src="http://www.altpress.com/images/uploads/news/Hello_Kitty.jpg" alt="This is a cool picture" width="300px" />
I have a transparent, grey-scale PNG of an icon. I want to be able to change it's color like a font-icon.
A few more details: The PNGs have outer transparencies and inner white areas for the actual "icon", plus a small greyscale gradient so they have good-looking "fuzzy" edges. I'm armed with Image Magic, so I don't mind if I have to take negatives / otherwise perform transformations on the PNG prior to any solution.
Why I can't just use a font-icon set: We have some custom, proprietary icons we're using, and I've spend hours trying to convert them to a font-icon set with no success. So I'm unlikely to find our icons out there, and I can't get our icons into a font-icon set. I could be doing it wrong, or I could have no found the right tool.
So my next best bet looks to be using CSS "Masking", only I can't get that work. The idea would be to set the background of the div to the correct color, and then mask out the div so only the part that corresponds to the icon is visible... but I can't get that working, either.
I'm open to any ideas, but my gut says the CSS stuff is the "way to go", unless there's some PNG->Font tool I haven't found.
So to reiterate: I have a greyscale PNG with transparency, and I need to show it on a website with a "font-color" set by CSS.
Any ideas?
(Thanks!)
Using masking for that isn't hard:
.filtered {
width:200px;
height:200px;
position:relative;
background-color: red;
-webkit-mask-size: 100% 100%;
-webkit-mask-image: url(http://i35.tinypic.com/2091450.png);
mask-size: 100% 100%;
mask-image: url(http://i35.tinypic.com/2091450.png);
}
But you won't get much support for old browsers
fiddle
I'm trying to understand someone's CSS >> HERE <<.
Basically, he has defined his background element with this syntax:
background: url( 'bars.gif' ) 0 -50px no-repeat;
My image is a different size than his, so I am trying to adjust my code to fit my image. However, the w3schools info on CSS Background shows that this format should be used:
background: #ffffff url('img_tree.png') no-repeat right top;
Where is the overload info for background located?
Good question.
Short answer: The order is irrelevant to the final product.
Background is shorthand for five different properties.
background-color (# followed by digits or a named color)
background-image (url('url goes here'))
background-repeat (repeat, repeat-x, ...)
background-attachment (fixed, scroll)
background-position (location, percent, or pixels)
Notice that each option contains a unique formatting. This allows the renderer to understand the declaration without relying on a specific order. Also, any parameters unspecified are set to the default.
W3schools suggests a format to reduce the cognitive load on developers (which obviously didn't work in this case). I would suggest that you stick with W3's suggestion to hopefully avoid this confusion in the future.
I have a page setup that looks similar to this:
<body>
<div id="wrapper">
<!--- ... content ... -->
</div>
</body>
The body has a background color and a tiling image that adds some noise and grain to the background. On top of that, #wrapper has a linear gradient as background that goes from rgba(0,0,0,.3) to rgba(0,0,0,0) and the gradient expands over 24 pixels at the top of the div, which is at the top of the page --- to add a shadow.
My problem is, that the color that the background of #wrapper holds after the 24 pixel gradient is done, is not true transparency, even though the end color of the gradient has an alpha value of zero. What this leaves me with, is a not true transparent background on #wrapper, that leaves a visible "split-line" on the body-background at the spot where #wrapper stops.
How do I get the gradient to go in to full transparency? I would guess an alpha value of zero would do this. Also, using the transparent keyword doesn't solve it either.
Update
I have added pictures to show the problem. The first picture is the actual look, and the second significantly shows where the line is, because it's there, though very unclear on the first picture.
As you can see, the gradient doesn't go in to true transparency. Not when the to-color is specified as rgba(0,0,0,0) or transparent.
-- Chris Buchholz
Are you testing it in a webkit browser (chrome/safari), firefox, IE or Opera? As they all treat gradients differently.
I don't fully understand though I believe you should consider using CSS gradient generators online, most of them use solid colors, just replace the hex decimal with the new RGBA().
That's the best way to learn how you're going wrong.
Other then that If you've defined opacity on the wrapper div that could be the Issue.
That's the best I can do
You didn't supply your CSS code. That will help spot the problem better. But one of possible issue is probably the stacking of CSS properties.
#wrapper {
background: rgb(174,188,191);
background: linear-gradient(to bottom, rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%);
}
Sample expected
#wrapper {
background: rgb(174,188,191);
background: linear-gradient(to bottom, rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%);
background: #111; /*Overrides the above properties*/
}
You overrode the first with another background property, maybe somewhere in your CSS with higher priority, causing your transparency overriden:
Sample overriden
I had the same kind of problem... and realized it was because I was saving the images as JPGs. You need something that supports transparency.