I’m always amazed at the things you can make with CSS3. One of CSS3’s killer feature was adding the ability to create gradients in a simple way. But some creative coders have taken CSS gradients to a new level by using them to generate background patterns.
So I thought it would be a good idea to make a list of some of the best CSS background patterns found on CodePen.
CSS Pattern Examples Using Gradients
A collection of patterns made with only CSS. These examples were made using repeating linear and radial gradients combined with using mutliple backgrounds.
See the Pen CSS Pattern Examples Using Background Gradients by Octavector (@Octavector) on CodePen.
Black & White CSS Background Patterns
A selection of various black and white CSS patterns and textures that can be used as backgrounds in your web projects.
See the Pen Black & White CSS Background Patterns by CWEI (@CWEI) on CodePen.
14 CSS Texture Patterns
14 CSS background patterns and textures that will look great in your future projects.
See the Pen 14 CSS Texture Patterns by InnerGraffiks (@InnerGraffiks) on CodePen.
Various CSS Patterns
Experimenting with CSS Patterns from Lea Verou’s book “CSS Secrets”.
See the Pen Various CSS Patterns by dg1234uk (@dg1234uk) on CodePen.
CSS Patterns Examples
Neat set of CSS pattern examples.
See the Pen CSS Patterns Examples by scottlittlewood (@scottlittlewood) on CodePen.
Heart Pattern Made With CSS
A lovely heart pattern made with only CSS.
See the Pen Heart Pattern Made With CSS by yoksel (@yoksel) on CodePen.
Polka, Stripes, Zigzag and Diamond CSS Patterns
Cool pack of polka, stripes, zig-zag and diamond patterns made with CSS.
See the Pen Polka, Stripes, Zigzag and Diamond CSS Patterns by jmisavage (@jmisavage) on CodePen.
Vampire, Zombie, Mummy & Werewolf Pattern Made With CSS
A Halloween special CSS pattern that features vampires, zombies, mummies and werewolfs.
See the Pen Vampire, Zombie, Mummy & Werewolf Pattern Made With CSS by dokdeleon (@dokdeleon) on CodePen.
Stripe CSS Patterns
Useful list of CSS stripe patterns.
See the Pen Stripe CSS Patterns by vushe (@vushe) on CodePen.
Underwater CSS Pattern
A cool underwater pattern made with only CSS.
See the Pen Underwater CSS Pattern by ThePixelPixie (@ThePixelPixie) on CodePen.
Diamond CSS Pattern
An elegant CSS diamond pattern.
See the Pen Diamond CSS Pattern by justynaj (@justynaj) on CodePen.
CSS Basket Weave Pattern
A well made basket weave pattern made with linear gradients.
See the Pen CSS Basket Weave Pattern by doytch (@doytch) on CodePen.
Pure CSS Christmas Tapestry Pattern Illustration
An animated Christmas tapestry pattern made with CSS.
See the Pen Pure CSS Christmas Tapestry Pattern Illustration by ilithya (@ilithya) on CodePen.
CSS Cross Pattern
A neat CSS cross pattern made with different types of background gradients.
See the Pen CSS Cross Pattern by bowman003 (@bowman003) on CodePen.
CSS Blue Cloth Pattern
Blue cloth pattern inspired from a t-shirt and made with CSS gradients.
See the Pen CSS Blue Cloth Pattern by praveenpuglia (@praveenpuglia) on CodePen.
Tablecloth Pattern Made With CSS
If you like tablecloths, then you’re gonna love this pattern made with only CSS.
See the Pen Tablecloth Pattern Made With CSS by danichk (@danichk) on CodePen.
Colored Wave Pattern
An awesome CSS wave pattern made with a neat color scheme.
See the Pen Colored Wave Pattern by yoksel (@yoksel) on CodePen.
Modern White Bricks Pattern
A cool example of modern bricks made with CSS.
See the Pen Modern White Bricks Pattern by praveenpuglia (@praveenpuglia) on CodePen.
CSS Pattern Gradients
5 Examples of grid, paper, royal, sakura and wall patterns made with linear gradients in CSS.
See the Pen CSS Pattern Gradients by FelixRilling (@FelixRilling) on CodePen.
Old Style Cloth – CSS Texture
Old style cloth texture using only CSS3 linear gradients.
See the Pen Old Style Cloth – CSS Texture by kapil-lakhani (@kapil-lakhani) on CodePen.
Old-school Photoshop Textures Using CSS
Using repeating-linear-gradient and a little tweaking, you can emulate those old-school Photoshop patterns you used to hate making.
See the Pen Old-school Photoshop Textures Using CSS by bitmap (@bitmap) on CodePen.
CSS Pattern With CSS Blend Mode
Create tablecloth pattern using mixin with CSS background-blend-mode.
See the Pen CSS Pattern With CSS Blend Mode by marinda-s (@marinda-s) on CodePen.
Four-leaf Clover Pattern
Four-leaf Clover(Quatrefoil) pattern made with CSS.
See the Pen Four-leaf Clover Pattern by Dubi_Kaufmann (@Dubi_Kaufmann) on CodePen.
Square Pattern Made With CSS Gradients
A simple looking CSS background pattern made out of squares.
See the Pen Square Pattern Made With CSS Gradients by bowman003 (@bowman003) on CodePen.
Transparent Circle Pattern
A lovely CSS pattern made out of transparent circles & diamonds.
See the Pen Transparent Circle Pattern by bowman003 (@bowman003) on CodePen.
Colored Squares Pattern
Lovely color scheme on this pattern made out of squares.
See the Pen Colored Squares Pattern by yoksel (@yoksel) on CodePen.
Zigzag Pattern
Neat zigzag pattern made with only CSS.
See the Pen Zigzag Pattern by a1ip (@a1ip) on CodePen.
Animated Diagonal Wave Pattern
An animated CSS diagonal wave pattern.
See the Pen Animated Diagonal Wave Pattern by code_anguyen (@code_anguyen) on CodePen.
CSS Circle Pattern
Elegant circle pattern made using pure CSS.
See the Pen CSS Circle Pattern by yoksel (@yoksel) on CodePen.
