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;