2

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?

Improve this question
2
  • 1
    CSS is not a graphics program like Illustrator. While it probably can be done, the effort would be better put to using anything else. Another question would be the cost in computing time to generate the image each time and whether it would slow the page down.
    – Rob
    Commented Dec 24, 2013 at 15:55
  • possible duplicate of Textures - How to use in Web Design
    – Alex Blackwood
    Commented Dec 24, 2013 at 16:12

2 Answers 2

Reset to default
2

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:

texture

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.

Improve this answer
2

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.

enter image description here

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.

Improve this answer
4
  • Thanks for the examples. I also found this gallery while I was looking for options.
    – Micah Bolen
    Commented Dec 25, 2013 at 20:29
  • good - that was the first link in my answer:-) It will be fiddly to make, but it is technically possible.
    – benteh
    Commented Dec 25, 2013 at 20:31
  • Very interesting and render taxing :) Should note too... "Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+" and that patternify link simply generates an image as base 64 data URI You can do that with any image. It's just as taxing on page load as a direct image, although it is one less HTTP request.
    – Scott
    Commented Dec 25, 2013 at 22:09
  • Yes, first link is basically generating an "image" with css and then repeating. Patternify was more of a sidenote, really. No, it is not widely supported yet, but hey, live on the edge! I would not really be all that worried about http reqs either way. Personally, I would not be too worried about loadtime either. I like living on the sharp CSS edge :-)
    – benteh
    Commented Dec 25, 2013 at 22:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.