I would like to render/generate a CSS pattern that looks something like green poker table felt or AstroTurf. Is this possible?
Alternatively, would an image-based pattern be a better solution? If so, why?
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.Sign up to join this community
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.
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.
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.