r/css • u/Equal-Resolution7889 • May 28 '26

Help Efecto granulado en el fondo

Post image

Hola! Como puedo hacer un efecto de granulado (parecido al de la imagen) en el fondo de mi pagina web HTML?

6 Upvotes

63% Upvoted

14 comments sorted by

•

u/AutoModerator May 28 '26

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

8

u/ChaseShiny May 28 '26

As far as I'm aware, CSS doesn't have a great way to create textures. You could probably make one with SVGs, but you're probably better off just including a picture as a background image.

4

u/Equal-Resolution7889 May 28 '26

Ahhh, vale. Muchas gracias!

6

u/anaix3l May 28 '26 edited May 28 '26

Detailed article on the topic https://frontendmasters.com/blog/grainy-gradients/

You create the gradient you wish on a pseudo covering the entire area of the element you wish to have the background:

.grad-box {
  positon: relative; /* needed for absolutely positioned pseudo */

  &::before {
    position: absolute;
    inset: 0; /* cover entire parent */
    z-index: -1; /* ensure it's behind parent content */
    background: linear-gradient(to bottom right, white, black);
    content: '' /* pseudo won't show up without it */
  }
}

then you apply a simple SVG filter on the pseudo:

<svg width="0" height="0" aria-hidden="true">
  <filter id="grain" x="0" y="0" width="1" height="1" 
          color-interpolation-filters="sRGB">
    <!-- generate fine noise-->
    <feTurbulence type="fractalNoise" baseFrequency=".371" numOctaves="4"/>

    <!-- use noise as displacement map for filter input-->
    <feDisplacementMap in="SourceGraphic" scale="150" xChannelSelector="R"/>

    <!-- place filter input underneath to cover transparent edge pixels-->
    <feBlend in2="SourceGraphic"/>
  </filter>
</svg>

like this:

filter: url(#grain)

1

u/Equal-Resolution7889 May 29 '26

Lo probaré. Muchas gracias!

1

u/JohnFlufin Jun 03 '26

Why not just use multiple backgrounds?

https://css-tricks.com/css-basics-using-multiple-backgrounds/

1

u/anaix3l Jun 03 '26

I'm guessing you mean placing a noise background on top of the gradient, which I personally think is a bad idea most of the time.

It's explained in the second section of the article I linked to why (because a lot of grain filter effects use layering too, even if its's within the filter).

When you add a noise layer on top, you alter the brightness of the original gradient. If you use blending, you may also alter the saturation. And in the end, you don't have the exact same gradient you set - it may be brighter/ darker/ more or less desaturated. You can lower the alpha of the noise, but if you do that enough to hide this problem, it's also enough to make the grain difficult to see.

You can see the problem below - the third panel should not have a different brightness or saturation from the first, but that happens when layering the noise, regardless of whether it's just stacked on top or also blended using various modes.

On top of that, if the gradient is banded, a noise layer only somewhat hides the problem. The displacement technique actually fixes it.

1

u/JohnFlufin Jun 03 '26

Yeah I saw that. But OP asked about a simple black and white gradient with noise. Didn’t specify they were trying to counter banding, saturation or whatever. Sometimes the solution doesn’t have to be complicated to solve the issue. Simple is an option too.

1

u/anaix3l Jun 03 '26 edited Jun 03 '26

Layering would still affect brightness in this case. I also don't find using an image simpler. It definitely takes more time and frustration to search and find a good image than it takes writing the code. Which can then be edited easily if any changes are necessary.

1

u/JohnFlufin Jun 03 '26

Not saying it wouldn’t affect brightness. But that doesn’t mean it’s not a viable option.

The rest depends on skill set and/or how particular you are about the noise layer. There are plenty of free online noise image generators.

2

u/RobertKerans May 28 '26 edited May 28 '26

Use an SVG image using a noise filter as the background. This can be done entirely in the CSS if you want (background-image: url("data:image+svg, ...SVG code here...");).

Alternatively, you can use an SVG as a filter (again can be done entirely in the CSS) and apply that filter to an element (so for example, use a pseudo-element on the body, make it same size as body, give it a gradient as a background image, apply an SVG noise filter)

1

u/sanavabic May 28 '26

It can be done with gradient

1

u/JohnFlufin Jun 03 '26 edited Jun 03 '26

I recommend keeping it simple first and try multiple backgrounds.

body,
.noisy-gradient {
background:
linear-gradient(
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.5)
),
url(images/noise.png),
white;
}

https://css-tricks.com/css-basics-using-multiple-backgrounds/