: Is it possible to create a green poker table felt pattern with CSS? I would like to render/generate a CSS pattern that looks something like green poker table felt or AstroTurf. Is this possible?

@Harper654

Technically, yes you can.
Here is a (not very stylish) Fiddle.

Here is where I got it from. (the fiddle was just me testing).

Here is Patternify - not very stylish yet, but just to get the point across.

Simurais playground.

Similar things are often used in progress-bars, but they will always have fall-backs for non-css3 browsers.



Beware: Pure CSS3 background patterns are not widely supported. But you could always make one, and have a fall-back on a pattern based on the traditional technique of using tiles. And with JS you can do all sorts of magic.

Vote Up Vote Down

@Nimeshi706

No. Not without the use of images.

CSS offers solid color fills and gradient fills. It does not offer texture fills.

With CSS filters you can.... blur, greyscale, sepia tone.... adjust brightness, contrast, hue, saturation, opacity .... add a drop shadow or invert the image. Be aware CSS filters are only supported in most recent browsers and fail in older versions.

That is the extent of CSS image capabilities.

If it were me, I'd create a transparent pattern tile (png) to use as a background image over a solid CSS color fill. This would provide the texture while retaining the ability to alter the actual color underneath.

I used this technique to create this background on a web site:



The actual color is a CSS gradient, then on top of that there is a transparent PNG to provide the noise or texture effect. This allows the png to remain very, very small in terms of file size. In addition, I can alter the base color easily with one CSS selector.

Vote Up Vote Down