Фоны на чистом CSS - сборник

Фон сайта или отдельного его элемента сделанный на чистом CSS, имеет ряд преимуществ перед фоном использующим для этого изображения. Тут выгода не только в размерах файлов, но и в запросах к серверу.

Хочу представить небольшую сборку простых CSS паттернов, которые часто используются на сайтах.

CSS паттерны для сайта

Представленные ниже CSS-паттерны просты про структуре. Их можно применять как исходники для написания своего собственного фона.

Можно легко менять расцветки и размеры в рисунке фона. Как правило цвет и размеры подгоняются через панель разработчика в браузере или в редакторе с включённым Live Reader.

В исходниках кода я опускаю CSS-класс для атрибутов, оставляя только стили.

Фон сайта V3C

Ну а начать пожалуй стоит с фона установленного на этом сайте. Если вы думали что фон сайта это картинка прописанная через background то нет, этот фон сделан на чистом CSS.

Выглядит он вот так:

А вот его CSS код:

background-color: #269;
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
background-image:
 -webkit-linear-gradient(white 2px, transparent 2px),
 -webkit-linear-gradient(0, white 2px, transparent 2px),
 -webkit-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
 -webkit-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
background-image:
 -moz-linear-gradient(white 2px, transparent 2px),
 -moz-linear-gradient(0, white 2px, transparent 2px),
 -moz-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
 -moz-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
background-image:
 linear-gradient(white 2px, transparent 2px),
 linear-gradient(90deg, white 2px, transparent 2px),
 linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
 linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);

Горизонтальные линии

Фон из цветных горизонтальных линий, сделанный на CSS

css:

background-size: 50px 50px;
background-color: #3d5762;
background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);

Вертикальные линии

Так же можем расположить линии вертикально:

css

background-size: 50px 50px;
background-color: #726144;
background-image: -webkit-linear-gradient(0deg, #5a4e39 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(0deg, #5a4e39 50%, transparent 50%, transparent);
background-image: linear-gradient(90deg, #5a4e39 50%, transparent 50%, transparent);

Сетка

Своеобразный гибрид из вертикальных и горизонтальных линий. В примере применены цвета с прозрачностью, что при пересечении линий образует в сетке квадратики более тёмного цвета:

CSS

background-size: 50px 50px;
background-color: #ddd;
background-image: -webkit-linear-gradient(transparent 50%, rgba(0, 108, 21, .5) 50%, rgba(0, 108, 21, .5)),
                  -webkit-linear-gradient(0deg, transparent 50%, rgba(0, 108, 21, .5) 50%, rgba(0, 108, 21, .5));
background-image: -moz-linear-gradient(transparent 50%, rgba(0, 108, 21, .5) 50%, rgba(0, 108, 21, .5)),
                  -moz-linear-gradient(0deg, transparent 50%, rgba(0, 108, 21, .5) 50%, rgba(0, 108, 21, .5));
background-image: linear-gradient(transparent 50%, rgba(0, 108, 21, .5) 50%, rgba(0, 108, 21, .5)),
                  linear-gradient(90deg, transparent 50%, rgba(0, 108, 21, .5) 50%, rgba(0, 108, 21, .5));

Наклонные линии

Так же возможности CSS позволяют сделать линии с уклоном:

CSS

background-size: 50px 50px;
background-color: #740064;
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);

Наклонённые линии на CSS

Без труда можем повернуть наклон линий в другую сторону и изменить цвет:

CSS

background-size: 50px 50px;
background-color: #0c6e12;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);
background-image: linear-gradient(135deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);

Шахматная клетка

А вот фон на CSS в виде шахматной клетки из чёрно-белых квадратов:

CSS

background-color: #eee;
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
background-image: -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
                  -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-image: -moz-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
                  -moz-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
                  linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);

Клетка по диагонали

Можно клетку повернуть под углом:

CSS

background-color: #eee;
background-size: 60px 60px;
background-image: -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
                  -webkit-linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-image: -moz-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
                  -moz-linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
                  linear-gradient(135deg, black 25%, transparent 25%, transparent 75%, black 75%, black);

Мелкий градиент

Мутный мелкий градиент, но очень часто встречающийся на сайтах:

CSS

background: linear-gradient(45deg, #292929 25%, transparent 25%, transparent 75%, #292929 75%), linear-gradient(45deg, #292929 25%, transparent 25%, transparent 75%, #292929 75%) 0.1875em 0.1875em, radial-gradient(at 50% 0, #484847, #090909);
background-size: 0.375em 0.375em, 0.375em 0.375em, 100% 100%;

Фон - Звёздочки на CSS

Фон на CSS из звёздочек

CSS

background: -webkit-linear-gradient(126deg, #232927 4%,   transparent 4%) -70px 43px,
            -webkit-linear-gradient( 54deg, #232927 4%,   transparent 4%) 30px 43px,
            -webkit-linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
            -webkit-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
            -webkit-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
            -webkit-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,
            -webkit-linear-gradient(126deg, #232927 4%,   transparent 4%) -20px 93px,
            -webkit-linear-gradient( 54deg, #232927 4%,   transparent 4%) 80px 93px,
            -webkit-linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
            -webkit-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
            -webkit-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
            -webkit-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
background: -moz-linear-gradient(126deg, #232927 4%,   transparent 4%) -70px 43px,
            -moz-linear-gradient( 54deg, #232927 4%,   transparent 4%) 30px 43px,
            -moz-linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
            -moz-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
            -moz-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
            -moz-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,
            -moz-linear-gradient(126deg, #232927 4%,   transparent 4%) -20px 93px,
            -moz-linear-gradient( 54deg, #232927 4%,   transparent 4%) 80px 93px,
            -moz-linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
            -moz-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
            -moz-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
            -moz-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
background: linear-gradient(324deg, #232927 4%,   transparent 4%) -70px 43px,
            linear-gradient( 36deg, #232927 4%,   transparent 4%) 30px 43px,
            linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
            linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
            linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
            linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,
            linear-gradient(324deg, #232927 4%,   transparent 4%) -20px 93px,
            linear-gradient( 36deg, #232927 4%,   transparent 4%) 80px 93px,
            linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
            linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
            linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
            linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
background-color: #232927;
background-size: 100px 100px;

Лесенка

CSS

background-color: #FF7D9D;
background-size: 58px 58px;
background-position: 0px 2px, 4px 35px, 29px 31px, 33px 6px,
                     0px 36px, 4px 2px, 29px 6px, 33px 30px;
background-image: -webkit-linear-gradient(115deg, #C90032 23px, transparent 23px),
                  -webkit-linear-gradient(295deg, #C90032 23px, transparent 23px),
                  -webkit-linear-gradient(115deg, #C90032 23px, transparent 23px),
                  -webkit-linear-gradient(295deg, #C90032 23px, transparent 23px),
                  -webkit-linear-gradient(115deg, #C90032 10px, transparent 10px),
                  -webkit-linear-gradient(295deg, #C90032 10px, transparent 10px),
                  -webkit-linear-gradient(115deg, #C90032 10px, transparent 10px),
                  -webkit-linear-gradient(295deg, #C90032 10px, transparent 10px);
background-image: -moz-linear-gradient(115deg, #C90032 23px, transparent 23px),
                  -moz-linear-gradient(295deg, #C90032 23px, transparent 23px),
                  -moz-linear-gradient(115deg, #C90032 23px, transparent 23px),
                  -moz-linear-gradient(295deg, #C90032 23px, transparent 23px),
                  -moz-linear-gradient(115deg, #C90032 10px, transparent 10px),
                  -moz-linear-gradient(295deg, #C90032 10px, transparent 10px),
                  -moz-linear-gradient(115deg, #C90032 10px, transparent 10px),
                  -moz-linear-gradient(295deg, #C90032 10px, transparent 10px);
background-image: linear-gradient(335deg, #C90032 23px, transparent 23px),
                  linear-gradient(155deg, #C90032 23px, transparent 23px),
                  linear-gradient(335deg, #C90032 23px, transparent 23px),
                  linear-gradient(155deg, #C90032 23px, transparent 23px),
                  linear-gradient(335deg, #C90032 10px, transparent 10px),
                  linear-gradient(155deg, #C90032 10px, transparent 10px),
                  linear-gradient(335deg, #C90032 10px, transparent 10px),
                  linear-gradient(155deg, #C90032 10px, transparent 10px);

Плетёнка

CSS паттерн со структурой похожей на плетёнку.

CSS

background: -webkit-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
            -webkit-linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px,
            -webkit-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
            -webkit-linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px,
            -webkit-linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
            -webkit-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background: -moz-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
            -moz-linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px,
            -moz-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
            -moz-linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px,
            -moz-linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
            -moz-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
            linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
            linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
            linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
            linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
            linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-size: 20px 20px;
background-color: #131313;

Линейный градиент

CSS

background-color: #026873;
background-size: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
background-image: -webkit-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%),
                  -webkit-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%),
                  -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%),
                  -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
background-image: -moz-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%),
                  -moz-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%),
                  -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%),
                  -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
                  linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
                  linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
                  linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);

Я надеюсь что вам будет полезна данная сборка и вскоре сделаю подобную подборку CSS градиентов подходящих для сайтов детской, женской и строительной тематик.

Ну а если есть какие вопросы - оставляйте их в комментариях.