CSS Patterns

We can design the background using linear-gradient(),repeating linear-gradient(),radial-gradient(),repeating-radial-gradient() functions in CSS. Use these functions to design your background what you expected instead of using background pictures and solid colors.In this article I put some simple patterns with codes in 4 different categories.

1. background stripes
2. linear background patterns
3. circular background patterns
4. zigzag background patterns

1.background stripes

Use linear-gradient(),repeating-linear-gradient() function to create background stripes.Here are some sample stripes with codes.

1. vertical stripes

After changing transparent pixel we can get this one.

2.horizontal stripes

3.stripes in angle

here using degree to get stripes in any angle.here also we can get horizontal and vertical stripes.

code for vertical stripe

vertical stripe

code for horizontal stripe

horizontal stripe

code for 120deg slant stripe

120 deg slant stripe

code for -120deg slantstripe

-120deg slantstripe

code for thin stripe

thin stripe

code for thick stripe

thick stripe

2.Linear background patterns

linear-gradient() ,repeating-linear-gradient() are the functions use for design linear background patterns using straight lines.We can design more effects from these functions.

3.Circular background patterns

We can get the circular effects using radial-gradient(),repeating-radial-gradient() functions in css. Following are some sample circular patterns

code for circular1

circular1

code for circular2

circular2

code for circular3

circular3

In circular3 background position for the first radialfunction is( 0 0 )[0px from left and 0px from top]and background position for 2nd radial function is(30px 30px)[30px from left and 30px from top].We can get differnt pattern from changing the background position here.

code for circular4

circular4

code for circular5

circular5

In circular5 I only change the transparent and black level in circular2

4. ZigZag background patterns

We can design the zig-zag patterns using linear-gradient() function.Some sample patterns and their codes are showing below.

code for zig-zag1

zig-zag1

code for zig-zag2

zig-zag2

We can get different patterns just to change positions.For zig-zag3 I only change the position in zigzag3.

code for zig-zag3

zig-zag3

Try to change transparent position and percentage of colors to get more patterns.In all background patterns we only use linear-gradient() and radial-gradient() functions