House icon

CSS Patterns

This is a (growing) compilation of css patterns which can be used as background elements.


background: repeating-linear-gradient(-55deg, transparent, transparent 15px,
        rgba(255, 255, 255, .2) 15px,
        rgba(255, 255, 255, .2) 30px),
    linear-gradient(45deg, linen, snow);

background: repeating-linear-gradient(-45deg, transparent, transparent 10px,
rgba(255, 255, 255, .2) 10px,
rgba(255, 255, 255, .2) 20px),
linear-gradient(to bottom, #002d38, #25041e);

background:
radial-gradient(rgba(254, 195, 0, 1) 3px, transparent 4px),
radial-gradient(rgba(254, 195, 0, 1) 3px, transparent 4px),
linear-gradient(black 4px, transparent 0),
linear-gradient(45deg, transparent 61px, transparent 62px, rgba(254, 195, 0, 0.8) 62px, rgba(254, 195, 0, 0.8) 63px, transparent 64px, transparent 90px),
linear-gradient(-45deg, transparent 62px, transparent 63px, rgba(254, 195, 0, 0.8) 63px, rgba(254, 195, 0, 0.8) 64px, transparent 65px, transparent 90px),
black;
background-size: 90px 90px, 90px 90px, 100% 5px, 90px 90px, 90px 90px;
background-position: 44px 45px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;

background-color: #eeeeee;
background-image: radial-gradient(orchid 5%, transparent 7%), radial-gradient(orchid 5%, transparent 7%);
background-size: 36px 36px;
background-position: 0 0, 18px 18px;