HTML/CSS

Сборник CSS градиентов

Подборка 22-х фонов с линейным и радиальным градиентом.

body {
    background: linear-gradient(90deg, #f598a8, #f6edb2);
}
body {
    background: linear-gradient(90deg, #faf0cd, #fab397);
}
body {
    background: linear-gradient(90deg, #cfecd0, #a0cea7, #9ec0db);
}
body {
    background: linear-gradient(90deg, #cfecd0, #ffc5ca);
}
body {
    background: linear-gradient(90deg, #b9deed, #efefef);
}
body {
    background: linear-gradient(90deg, #aea4e3, #d3ffe8);
}
body {
    background: linear-gradient(90deg, #69b7eb, #b3dbd3, #f4d6db);
}
body {
    background: linear-gradient(90deg, #ee5c87, #f1a4b5, #d587b3);
}
body {
    background: linear-gradient(85deg, #fb63f9, #c2e534);
}
body {
    background: linear-gradient(21deg, #dd03e4, #5611ec);
}
body {
    background: linear-gradient(4deg, #5462c3, #ba872c);
}
body {
    background: linear-gradient(81deg, #ddb35f, #7409c7);
}
body {
    background: linear-gradient(135deg, #e55d87 0%, #5fc3e4 100%);
}
body {
    background: linear-gradient(3deg, #e6d16c, #16014c);
}
body {
    background: linear-gradient(66deg, #e38010, #1535bf);
}
body {
    background: 
        linear-gradient(rgba(135, 60, 255, 0.4), rgba(135, 60, 255, 0.0) 80%),
        linear-gradient(-45deg, rgba(120, 155, 255, 0.9) 25%, rgba(255, 160, 65, 0.9) 75%);
}
body {
    background-blend-mode: screen;
    background:
        linear-gradient(limegreen, transparent),
        linear-gradient(90deg, skyblue, transparent),
        linear-gradient(-90deg, coral, transparent);
}
body {
    background: linear-gradient(#c6e4ee 0%, #c6e4ee 40%, #fed1ae 60%, #faa0b9 70%, #cb7dcb 80%, #757ecb 100%);
}
body {
    background: linear-gradient(to right, #f00, #ffa500, #ff0, #008000, #00f, #4b0082, #ee82ee);
}
body {
    background: linear-gradient(to bottom, #b721ff, #2af598, #fec051, #fee140, #fa709a);
}
body {
    background: 
        radial-gradient(ellipse farthest-corner at right bottom, #fedb37 0%, #FDB931 8%, #9f7928 30%, #8a6e2f 40%, transparent 80%),
        radial-gradient(ellipse farthest-corner at left top, #ffffff 0%, #ffffac 8%, #d1b464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
}
body {
    background-blend-mode: screen;
    background-blend-mode: multiply;
    background-blend-mode: overlay;
    background-blend-mode: darken;
    background-blend-mode: soft-light;
    background-blend-mode: luminosity;    
    background:
        linear-gradient(red, transparent),
        linear-gradient(to top left, lime, transparent),
        linear-gradient(to top right, blue, transparent);
}
12 февраля 2019
Такой эффект можно легко сделать через CSS свойство transition например для кнопок, меню и т.д.
Цвет карты можно изменить начиная с версии 2.0 с помощью CCS фильтров, применив их к элементу .ymaps-layers-pane
Оригинальный размер капчи составляет 304x78px и чаще всего она не помещается в габариты форм сайта. Исправить это можно...
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.