Красивые градиенты

Градиентные заливки по умолчанию занимают всю площадь элемента. Управляя размером заливки с помощью свойства background-size и положением с помощью background-position, можно создавать красивые узоры.

Перейти на страницу с примерами

1. Фестоны

div {
height: 200px;
background: radial-gradient(#FBB03B 0%, #FBB03B 50%, #8AD4E1 50%, #8AD4E1 70%, white 70%, white 100%) 0 190px, 
radial-gradient(#FBB03B 0%, #FBB03B 50%, #8AD4E1 50%, #8AD4E1 70%, white 70%, white 100%) 0 -10px;
background-size: 20px 20px;
background-repeat: repeat-x;
box-shadow: 1px 1px 2px 0 rgba(0,0,0,.2), -1px -1px 2px 0 rgba(0,0,0,.2);
}

2. Диагональный узор

div {
background: linear-gradient(45deg, #CBDDEB, #CBDDEB 50%, #527383 50%);
background-size: 50px 50px;
}

3. Диагональный узор

div {
background: linear-gradient(135deg, #FABFB2, #FABFB2 25%, #FCA699 25%);
background-size: 20px 20px;
}

4. Градиентные границы

div {
background-color: #9097A2;
}
h4 {
padding: 30px 0;
color: white;
font-size: 40px;
position: relative;
margin: 0;
transform: translate(-50%, -50%);
top: 50%; 
left: 50%;  
background-image: linear-gradient(to right, rgba(211, 212, 218, 0), rgba(211, 212, 218, 0.3) 40%, rgba(211, 212, 218, 0.3) 60%, rgba(211, 212, 218, 0));
}
h4:before {
width: 100%;
height: 2px;
position: absolute;
left: 0;
top: 0;
content: "";
background-image: linear-gradient(to right, rgba(211, 212, 218, 0), rgba(211, 212, 218, 0.8) 40%, rgba(211, 212, 218, 0.8) 60%, rgba(211, 212, 218, 0));
}
h4:after {
width: 100%;
height: 2px;
position: absolute;
left: 0;
bottom: 0;
content: "";
background-image: linear-gradient(to right, rgba(211, 212, 218, 0), rgba(211, 212, 218, 0.8) 40%, rgba(211, 212, 218, 0.8) 60%, rgba(211, 212, 218, 0));
}

5. Крупная клетка

div {
background-image:
linear-gradient(#98B7AF 1px, transparent 1px),
linear-gradient(90deg, #98B7AF 1px, transparent 1px);
background-size: 2em 2em;
background-color: white; 
}

6. Горох

div {
background-color: white;
background-image: radial-gradient(#9ed8d3 5px, transparent 5px);
background-size: 30px 30px;
}

7. Радиальный градиент

div {
background-color: #e61f59;
background-image: radial-gradient(ellipse farthest-corner at right bottom, #ADC0CE 0%, #E61F59 50%, #E4E4E4 100%);
}

8. Плитка

div {
background-color: #DDD7D7;
background-size: 50px 50px;
background-image: 
linear-gradient(-45deg, transparent 52%, rgba(255,255,255,0.9) 54%, transparent 55%, transparent),
linear-gradient(45deg, transparent 52%, rgba(255,255,255,0.6) 54%, transparent 55%, transparent),
linear-gradient(-45deg, transparent 50%, rgba(0,0,0,0.1) 52%, transparent 53%, transparent),
linear-gradient(45deg, transparent 50%, rgba(0,0,0,0.05) 52%, transparent 53%, transparent);
}

9. Узор-купон

div {
background-color: #F2D95D;
background-image: radial-gradient(#7F7E7F 76%, transparent 0),
radial-gradient(#7F7E7F 72%, transparent 0),
radial-gradient(#7F7E7F 68%, transparent 0),
radial-gradient(#7F7E7F 64%, transparent 0),
radial-gradient(#7F7E7F 60%, transparent 0),
radial-gradient(#7F7E7F 56%, transparent 0),
radial-gradient(#7F7E7F 52%, transparent 0),
radial-gradient(#7F7E7F 48%, transparent 0),
radial-gradient(#7F7E7F 44%, transparent 0),
radial-gradient(#7F7E7F 40%, transparent 0),
radial-gradient(#7F7E7F 36%, transparent 0),
radial-gradient(#7F7E7F 32%, transparent 0),
radial-gradient(#7F7E7F 28%, transparent 0),
radial-gradient(#7F7E7F 24%, transparent 0);  
background-size: 1em 1em;
background-repeat: repeat-y;
background-position: 0 0, 1em 0, 2em 0, 3em 0, 4em 0, 5em 0, 6em 0, 7em 0, 8em 0, 9em 0, 10em 0, 11em 0, 12em 0, 13em 0;
}

10. Ретро лучи

div {
background:
linear-gradient(170deg, transparent 80%, #91CBCF 30%) ,
linear-gradient(156deg, transparent 68%, #E3D9C3 30%),
linear-gradient(135deg, transparent 60%, #91CBCF 30%),
linear-gradient(115deg, transparent 55%, #E3D9C3 30%),
linear-gradient(65deg, transparent 45%, #91CBCF 30%),
linear-gradient(45deg, transparent 40%, #E3D9C3 30%),
linear-gradient(24deg, transparent 32%, #91CBCF 30%),
linear-gradient(10deg, transparent 20%, #E3D9C3 20%),
linear-gradient(0deg, transparent 0%,  #91CBCF 0%);
background-position: center;
background-size: 100% 100%;
}

11. Елочный узор

div {
background-size: 48px 18px;
background-color: #CBCFD1;
background-image: 
linear-gradient(90deg, #607584 1%, transparent 2%), 
linear-gradient(45deg, transparent 7%, #607584 10%, transparent 10%, transparent 35%, #607584 37%, transparent 33%), 
linear-gradient(-45deg, transparent 8%, #E6EBED 10%, transparent 10%, transparent 35%, #E6EBED 37%, transparent 33%);
}

12. Соты

div {
background-color: #f76;
background-image:
linear-gradient(30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
linear-gradient(-30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
linear-gradient(30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
linear-gradient(-30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
linear-gradient(30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
linear-gradient(-30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
linear-gradient(30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
linear-gradient(-30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
linear-gradient(45deg, #544 25%, transparent 25%, transparent 75%, #544 75%),
linear-gradient(45deg, #544 25%, transparent 25%, transparent 75%, #544 75%);
background-position: 0 2em, 0 2em, 2em 4em, 2em 4em, 4em 2em, 4em 2em, 6em 4em, 6em 4em, 0 0, 2em 2em;
background-size: 8em 4em, 8em 4em, 8em 4em, 8em 4em, 8em 4em, 8em 4em, 8em 4em, 8em 4em, 4em 4em, 4em 4em;
}

13. Ромбы

div {
background-color:#1E3A52;
background-image: 
linear-gradient(30deg, #83C5E5 12%, transparent 12.5%, transparent 87%, #83C5E5 87.5%, #83C5E5),
linear-gradient(150deg, #83C5E5 12%, transparent 12.5%, transparent 87%, #83C5E5 87.5%, #83C5E5),
linear-gradient(30deg, #83C5E5 12%, transparent 12.5%, transparent 87%, #83C5E5 87.5%, #83C5E5),
linear-gradient(150deg, #83C5E5 12%, transparent 12.5%, transparent 87%, #83C5E5 87.5%, #83C5E5),
linear-gradient(60deg, #FE5568 25%, transparent 25.5%, transparent 75%, #FE5568 75%, #FE5568), 
linear-gradient(60deg, #FE5568 25%, transparent 25.5%, transparent 75%, #FE5568 75%, #FE5568);
background-position: 0 0, 0 0, 25px 50px, 25px 50px, 0 0, 25px 50px;
background-size: 50px 100px;
}

14. Цветные полосы

div {
background-image: linear-gradient(85deg, #B7AE9D 10%, #ACCECD 10%, #ACCECD 20%, white 20%, white 30%, #544E3E 30%, #544E3E 40%, #8A151B 40%, #8A151B 50%, #B7AE9D 50%, #B7AE9D 60%, #ACCECD 60%, #ACCECD 70%, white 70%, white 80%, #544E3E 80%, #544E3E 90%, #8A151B 90%);
}

15. Цветные полосы

div {
background-color: #81D4EC;
background-image: linear-gradient(182deg, #ED7B9C 32%, transparent 32%), linear-gradient(178deg, #EBEBEB 62%, transparent 62%);
}

16. Прозрачная основа

div {
background-color: white;
background-image: 
linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%), 
linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%);
background-position: 0 0, 8px 8px;
background-size: 16px 16px;
}

17. Узор-зигзаг

div {
background: linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -50px 0, 
linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -50px 0, 
linear-gradient(315deg, #ECEDDC 25%, transparent 25%), 
linear-gradient(45deg, #ECEDDC 25%, transparent 25%);
background-size: 100px 100px;
background-color: #F4CF24;
}

18. Ретро полосы

div {
background-image: 
linear-gradient(135deg, transparent 84px, #d95b43 84px, #d95b43 100px, #ecd078 100px, #ecd078 106px, #c02942 106px, #c02942 120px, #ecd078 121px, #ecd078 127px, #542437 127px, #542437 142px, #ecd078 142px, #ecd078 148px, #53777a 148px, #53777a 163px, #ecd078 163px, #ecd078 168px, #d95b43 169px), 
linear-gradient(135deg, #d95b43 15px, #d95b43, #ecd078 15px, #ecd078 21px, #c02942 21px, #c02942 36px, #ecd078 36px, #ecd078 42px, #542437 42px, #542437 57.5px, #ecd078 57px, #ecd078 63px, #53777a 63px, #53777a 78px, #ecd078 78px, #ecd078 84px, transparent 84px, transparent 99px);
background-size: 120px 120px;
}

19. Стразы

div {
background-color: white;
background-image: 
linear-gradient(white 25%, transparent 25%), 
linear-gradient(90deg, white 25%, transparent 25%), 
linear-gradient(transparent 75%, #d4d3d8 75%), 
linear-gradient(90deg, transparent 75%, #eff0ea 75%), 
linear-gradient(#eff0ea 50%, transparent 50%), 
linear-gradient(90deg, #d4d3d8 50%, transparent 50%);
background-size: 20px 20px;
}

20. Мозаичная плитка

div {
background-color: #5371B3;
background-image: 
linear-gradient(#eeeeee 25%, transparent 25%), 
linear-gradient(90deg, #eeeeee 25%, transparent 25%);
background-size: 8px 8px;
}

21. Кирпичный узор

div {
background: 
linear-gradient(225deg, transparent 24.5%, #449CB4 24.6%, transparent 24.8%) 37px -37px, 
linear-gradient(135deg, transparent 24.5%, #449CB4 24.6%, transparent 24.8%) 37px 111px, 
linear-gradient(135deg, transparent 24.5%, #449CB4 24.6%, transparent 24.8%) 37px 37px, 
linear-gradient(225deg, transparent 24.5%, #449CB4 24.6%, transparent 24.8%) 37px 37px, 
linear-gradient(135deg, transparent 24.5%, #449CB4 24.6%, transparent 24.8%) 74px 0px, 
linear-gradient(225deg, transparent 24.5%, #449CB4 24.6%, transparent 24.8%) 74px 0px, 
linear-gradient(135deg, transparent 24.5%, #449CB4 24.6%, transparent 24.8%) 74px 74px, 
linear-gradient(225deg, transparent 24.5%, #449CB4 24.6%, transparent 24.8%) 74px 74px;
background-size: 148px 148px;
background-color: #E8F4F2;
}

22. Сетка

div {
background: 
radial-gradient(ellipse farthest-corner, transparent 0%, transparent 35%, white 30%, white 40%, transparent 90%), 
radial-gradient(ellipse farthest-corner at 0 0, transparent 0%, transparent 20%, white 15%, white 20%, transparent 50%), 
radial-gradient(ellipse farthest-corner at 8px 8px, transparent 0%, transparent 20%, white 15%, white 20%, transparent 50%), radial-gradient(ellipse farthest-corner at 0 8px, transparent 0%, transparent 20%, white 15%, white 20%, transparent 40%), radial-gradient(ellipse farthest-corner at 8px 0, transparent 0%, transparent 20%, white 15%, white 20%, transparent 50%), linear-gradient(40deg, #AC394A 0%, #DC625F 30%, #EB7D5C 50%, #DC625F 70%, #AC394A 100%);
background-size: 8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px, 100% 100%;
}

23. Мозаичный узор

div {
background-color: #EEE2DB;
background-image:
linear-gradient(45deg,#ECD9D3 25%, transparent 25%, transparent 75%, #EBC4B8 75%),
linear-gradient(-45deg,#ECA797 25%, transparent 25%, transparent 75%, #E98A74 75%);
background-position: 0 0, 1em 1em;
background-size: 2em 2em, 2em 2em;
}

24. Мелкий зигзаг

div {
background-image: 
linear-gradient(-45deg, transparent 2px, #D1C7BF 2px, transparent 3px), 
linear-gradient(45deg, transparent 2px, #D1C7BF 2px, transparent 3px);
background-size: 6px 6px;
}

25. Ромбы

div {
background-color: #AACCBE;
background-image: 
linear-gradient(45deg, #DB1F04 25%, transparent 25%, transparent 75%, #DB1F04 75%, #DB1F04), 
linear-gradient(-45deg, #DB1F04 25%, transparent 25%, transparent 75%, #DB1F04 75%, #DB1F04);
background-size: 60px 60px;
}

26. Клетка

div {
background-color: #DEE2E5;
background-image: 
linear-gradient(transparent 99px, white 99px), 
linear-gradient(90deg, transparent 99px, white 99px), 
linear-gradient(transparent 19px, rgba(255, 255, 255, 0.3) 19px), 
linear-gradient(90deg, transparent 19px, rgba(255, 255, 255, 0.3) 19px);
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}

27. Пиксельный узор

div {
background-image: 
repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
background-size: 3px 3px;
}

28. Тетрадный лист

div {
background-color: #f9f9f9;
background-image:linear-gradient(#4C596C, transparent 1px);
background-size: 1.5em 1.5em;  
box-shadow: 1px 1px 2px rgba(0,0,0,.2), -1px -1px 2px rgba(0,0,0,.2);
}
div:before {
content: "";
display: inline-block;
height: 100%;
width: 4px;
border-left: 4px double #F54318;
position: relative;
left: 40px;
}

29. Горошек

div {
background: radial-gradient(#ffaf2f 2px, transparent 1px);
background-size: 20px 20px;
}

30. Цветочный узор

div {
background-color: white;
background-image: 
radial-gradient(transparent 40%, white 50%), 
radial-gradient(transparent 40%, #EF3641 40%);
background-size: 30px 30px, 20px 20px;
}

31. Зигзаг

div {
position: relative;
background: #D8E6F3;
margin: 14px 0;
}
div:before {
content: "";
height: 14px;
position: absolute;
left: 0;
right: 0;
top: -14px;
background: linear-gradient(45deg, #D8E6F3 25%, transparent 25%), linear-gradient(315deg, #D8E6F3 25%, transparent 25%), linear-gradient(225deg, white 25%, transparent 25%) -7px 0, linear-gradient(135deg, white 25%, transparent 25%) -7px 0;
background-size: 14px 14px;
background-color: #AFCDE7;
}
div:after {
content: "";
height: 14px;
position: absolute;
left: 0;
right: 0;
bottom: -14px;
background: linear-gradient(135deg, #D8E6F3 25%, transparent 25%), linear-gradient(225deg, #D8E6F3 25%, transparent 25%), linear-gradient(315deg, white 25%, transparent 25%) -7px 0, linear-gradient(45deg, white 25%, transparent 25%) -7px 0;
background-size: 14px 14px;
background-color: #AFCDE7;
}

32. “Страусиная кожа”

div {
background-color: #E4EFD1;
background-image:
radial-gradient(#FEFFFE 2px, transparent 3px, transparent 5px, #BAD78B 6px),
linear-gradient(#A6CC69 2px, transparent 4px, transparent 5px, #74924C 7px);
background-position: 0 0, 1em 1em;
background-size: 2em 2em, 2em 2em;
}

33. Клетчатый узор

div {
background-color: #ececea;
background-image: 
linear-gradient(to right, rgba(63, 75, 138, .7) 0, rgba(63, 75, 138, .7) 10px, transparent 10px, transparent 20px), 
linear-gradient(to top, rgba(63, 75, 138, .4) 0, rgba(63, 75, 138, .4) 10px, transparent 10px, transparent 20px);
background-size: 20px 20px;
}

34. Капли

div {
background: 
linear-gradient(70deg, #9B8A77 0.9em,transparent 1em), 
linear-gradient(-70deg, #9B8A77 0.9em, transparent 1em), 
radial-gradient(#9B8A77 0.9em, transparent 1em), 
linear-gradient(70deg, #47403A 0.9em, transparent 1em), 
linear-gradient(-70deg, #47403A 0.9em, transparent 1em), 
radial-gradient(#47403A 0.9em, transparent 1em);
background-position: 3em -3em,  -3em -3em, 0 0,  0 0,  0 0,  3em 3em;
background-size: 6em 6em;
background-color: #F0DFCA;
background-repeat: repeat;
font-size: 12px;
}

35. Тонкие диагональные полоски

div {
background-image: 
linear-gradient(-45deg, transparent 50%, #F1D0CB 50%, #F1D0CB 60%, transparent 60%), 
linear-gradient(-45deg, #F1D0CB 10%, transparent 10%);
background-color: #FCFAFB;
background-size: 1em 1em;
}

36. Узор-елочка

div {
background:
linear-gradient(to left bottom, transparent 0.4em, #EE3F40 0.4em, #EE3F40 1.02em, transparent 1.02em) 0 0, 
linear-gradient(to right top, transparent 0.4em, #EE3F40 0.4em, #EE3F40 1.02em, transparent 1.02em) 2em 0, 
linear-gradient(to left bottom, transparent 0.4em, #623D56 0.4em, #623D56 1em, transparent 0.4em) 0 1.02em, 
linear-gradient(to right top, transparent 0.4em, #623D56 0.4em, #623D56 1.02em, transparent 0.4em) 2em 1.02em,
linear-gradient(to right bottom, transparent 0.4em, #EE3F40 0.4em, #EE3F40 1.02em, transparent 1.02em) 0 0, 
linear-gradient(to left top, transparent 0.4em, #EE3F40 0.4em, #EE3F40 1.02em, transparent 1.02em) 2em 0, 
linear-gradient(to right bottom, transparent 0.4em, #623D56 0.4em, #623D56 1.02em, transparent 0.4em) 0 1.02em, 
linear-gradient(to left top, transparent 0.4em, #623D56 0.4em, #623D56 1.02em, transparent 0.4em) 2em 1.02em;
background-size: 4em 4em;
background-color: #F1E9D2;
background-repeat: repeat;
}

37. Диагональные полосы

div {
background-image: 
linear-gradient(-45deg, transparent 40%, rgba(255,97,94,.7) 40%, rgba(255,97,94,.7) 60%, transparent 60%), 
linear-gradient(135deg, rgba(255,97,94,.7) 10%, transparent 10%),
linear-gradient(-45deg, rgba(255,97,94,.7) 10%, transparent 10%),
linear-gradient(45deg, transparent 40%, #FFC45C 40%, #FFC45C 60%, transparent 60%),
linear-gradient(45deg, #FFC45C 10%, transparent 10%),linear-gradient(-135deg, #FFC45C 10%, transparent 10%);
background-color: #FCFAFB;
background-size: 2em 2em;
}

38. Диагональная клетка

div {
background: 
repeating-linear-gradient(45deg, transparent, transparent 1em, #5A9C6E 0, #5A9C6E 2em,
transparent 0, transparent 3em, #A8BF5A 0, #A8BF5A 4em,
transparent 0, transparent 5em, #FAC46E 0, #FAC46E 6em,
transparent 0, transparent 7em, #FAD5BB 0, #FAD5BB 8em),
repeating-linear-gradient(-45deg,transparent, transparent 1em, #A8BF5A 0,#A8BF5A 2em,
transparent 0, transparent 3em, #FAD5BB 0, #FAD5BB 4em,
transparent 0, transparent 5em, #FAC46E 0, #FAC46E 6em), #F2FEFF;
background-blend-mode: multiply;
}