Примеры:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
HTML:
|
1 |
<div class="card"></div> |
CSS для всех вариантов:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.card { overflow: hidden; position: relative; height: 300px; margin: 10px; border-radius: 8px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); background: linear-gradient(to left top, #337AB7, #BFE2FF); } .card:before, .card:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; content: ""; } .card:before { filter: contrast(19); mix-blend-mode: multiply; } .card:after { background: linear-gradient(90deg, #285f8f, #337AB7); mix-blend-mode: screen; } |
А далее добавляем нужный вариант
CSS для варианта 1
|
1 2 3 4 |
.card:before { background: repeating-linear-gradient(45deg, #000, #999, #000 5%), linear-gradient(45deg, #777, #000); background-blend-mode: screen; } |
CSS для варианта 2
|
1 2 3 4 |
.card:before { background: repeating-radial-gradient(circle at 0 50%, #000, #999, #000 5%), radial-gradient(circle at 0 50%, #777, #000); background-blend-mode: screen; } |
CSS для варианта 3
|
1 2 3 4 |
.card:before { background: repeating-conic-gradient(at -9% 25%, #000, #999, #000 2.5%), conic-gradient(at -9% 25%, #000, #777 50%); background-blend-mode: screen; } |
CSS для варианта 4
|
1 2 3 4 |
.card:before { background: repeating-linear-gradient(30deg, #000, #999, #000 5%), repeating-linear-gradient(-60deg, #000, #999, #000 5%), linear-gradient(30deg, #777, #000); background-blend-mode: screen; } |
CSS для варианта 5
|
1 2 3 4 |
.card:before { background: linear-gradient(#777, #000), repeating-radial-gradient(circle at -35% 0, #000, #999, #000 5%), repeating-radial-gradient(circle at -35% 100%, #000, #999, #000 5%); background-blend-mode: screen, difference; } |
CSS для варианта 6
|
1 2 3 4 |
.card:before { background: linear-gradient(30deg, #777, #000), repeating-linear-gradient(30deg, #000, #999, #000 5%), repeating-linear-gradient(-60deg, #000, #999, #000 5%); background-blend-mode: screen, difference; } |
CSS для варианта 7
|
1 2 3 4 |
.card:before { background: linear-gradient(30deg, #777, #000), repeating-linear-gradient(30deg, #000, #999, #000 5%), repeating-conic-gradient(#000, #999, #000 5%); background-blend-mode: screen, difference; } |
CSS для варианта 8
|
1 2 3 4 |
.card:before { background: linear-gradient(30deg, #777, #000), repeating-linear-gradient(30deg, #000, #999, #000 5%), repeating-radial-gradient(circle at 100% 50%, #000, #999, #000 5%); background-blend-mode: screen, difference; } |
CSS для варианта 9
|
1 2 3 4 |
.card:before { background: radial-gradient(circle, #777, #000), repeating-linear-gradient(-45deg, #000, #999, #000 5%), repeating-linear-gradient(45deg, #000, #999, #000 5%); background-blend-mode: screen, difference; } |
CSS для варианта 10
|
1 2 3 4 |
.card:before { background: conic-gradient(#777, #000), repeating-linear-gradient(-45deg, #000, #999, #000 5%), repeating-linear-gradient(45deg, #000, #999, #000 5%); background-blend-mode: screen, difference; } |
CSS для варианта 11
|
1 2 3 4 |
.card:before { background: radial-gradient(circle, #000, #666 70%), radial-gradient(circle, #000, #fff, #000 71%) 0 0/2em 2em round, radial-gradient(circle, #000, #fff, #000 71%) 1em 1em/2em 2em round; background-blend-mode: difference; } |
CSS для варианта 12
|
1 2 3 4 |
.card:before { background: linear-gradient(-15deg, #000, #666), radial-gradient(circle, #fff, #000 65%) 0 0/2em 2em round, radial-gradient(circle, #000, #fff, #000 65%) 1em 1em/2em 2em round; background-blend-mode: difference; } |
CSS для варианта 13
|
1 2 3 4 |
.card:before { background: linear-gradient(#777, #000), radial-gradient(circle, #000, #999, #000 65%) 0 0/2em 2em round, radial-gradient(circle, #000, #999, #000 65%) 1em 1em/2em 2em round; background-blend-mode: screen, difference; } |
CSS для варианта 14
|
1 2 3 4 |
.card:before { background: conic-gradient(at 0 50%, #777, #000), repeating-radial-gradient(circle at 0 0, #000, #999, #000 5%), repeating-conic-gradient(at -5% 50%, #000, #999, #000 5%); background-blend-mode: screen, difference; } |
CSS для варианта 15
|
1 2 3 4 |
.card:before { background: repeating-linear-gradient(45deg, #000, #999, #000 5%) 0/50% no-repeat, repeating-linear-gradient(-45deg, #000, #999, #000 5%) 100%/50% no-repeat, linear-gradient(#777, #000); background-blend-mode: screen; } |
CSS для варианта 16
|
1 2 3 4 |
.card:before { background: radial-gradient(circle, #888, #000), repeating-radial-gradient(circle at 0 100%, #000, #888, #000 5%) 0 0/100% 50% no-repeat, repeating-radial-gradient(circle at 100% 0, #000, #888, #000 5%) 0 100%/100% 50% no-repeat; background-blend-mode: screen; } |
CSS для варианта 17
|
1 2 3 4 5 |
.card:before { background: radial-gradient(#000, #fff 70%) 0.75em 0.75em, conic-gradient(from -90deg at 15% 50%, #fff, #000 5% 30%, #fff 35%), conic-gradient(at 50% 15%, #fff, #000 5% 30%, #fff 35%), conic-gradient(from 90deg at 85% 50%, #fff, #000 5% 30%, #fff 35%), conic-gradient(from 180deg at 50% 85%, #fff, #000 5% 30%, #fff 35%); background-size: 1.5em 1.5em; background-blend-mode: difference, multiply, multiply, multiply; } |
CSS для варианта 18
|
1 2 3 4 |
.card:before { background: linear-gradient(#777, #000), repeating-conic-gradient(#ddd, #000 12.5% 37.5%, #ddd 50%) 0/1em 1em; background-blend-mode: screen; } |
CSS для варианта 19
|
1 2 3 4 |
.card:before { background: radial-gradient(circle, #000, #777), repeating-radial-gradient(circle, #ddd, #000, #ddd 5%), repeating-conic-gradient(#ddd, #000, #ddd 5%); background-blend-mode: screen, difference; } |
CSS для варианта 20
|
1 2 3 4 |
.card:before { background: repeating-linear-gradient(45deg, #000, #666, #000 20%), repeating-radial-gradient(circle, #ddd, #000, #ddd 5%), repeating-conic-gradient(#ddd, #000, #ddd 5%); background-blend-mode: screen, difference; } |
Найдено на codepen.io у пользователя Ana Tudor
Прекрасно! По делу, без воды. Действительно, замечательные градиенты! Спасибо!
Просто великолепные ГРАДИЕНТЫ !!! СПАСИБО !!!