Radial Gradient Patterns

I really like the way this developer created radial patterns. I’d like to create one, but not sure how to actually create the pattern I want.

The attachment is the one i’d like to create. I’ve tried generators, but can’t get the right circle/tones.

I think you need to create it first like in illustrator or photoshop then setting it as a pattern in code.

I mean I’d be tempted to just use an image for this. 50x50pxish image and just repeat that bad boy.

You might find something close here that you can tweak.

http://lea.verou.me/css3patterns/

Yes, that’s where I got the idea. But I’m trying to figure out HOW to manipulate one of those to make the pattern I want. I guess I’ll need to study more on how that’s done. I’d rather use CSS than create background images.

Sure. That’s the easy way. But wouldn’t the page load be faster if i use CSS?

Is a .7048s load time slower than .7000s load time? Sure, I guess.

I spend a lot of my time creating in Illustrator, so maybe this tutorial will help you in creating your pattern. Adobe Illustrator create and apply patterns. Other wise if you didn’t want to create your own and you need a quick fix in the mean time. you could try subtle Patterns and just make sure you compress your image before uploading to your host. tinyPNG .

Hopefully this helps :slight_smile:

Sarcasm noted :grinning:

I’m just thinking that it would be a great practice if we’re using image heavy sites to just start learning the method of creating patterns with CSS. I think it’s awesome that CSS3 can be used for such things, but I guess I still have a lot to learn in that department.

1 Like

Thanks for the tip, lauren_olsen17.

My pattern is already made as an image, I just thought I could easily learn something new with CSS3. Guess not. Here comes another learning curve! :smile:

this may also help:

CSS3 Patterns
Patterns tutuorial

Thanks lauren_olsen17.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.