Прекрасные градиенты на CSS3

Дата публикации:2014-05-19

Если раньше для создания градиентов на сайте, приходилось использовать отдельные изображения, которые заранее делались в каком-либо, графическом редакторе, или же задавались как повторяющийся фон, то сейчас это вовсе не нужно. Благодаря CSS3 теперь градиенты можно делать с помощью кода, и получать прекрасный эффект, ни каких лишних изображений. Ниже вы увидите градиенты которые можно сделать, а под ними css код для их реализации:

Код градиента:

background: -webkit-linear-gradient(#e74c3c, #f1c40f);
background: -o-linear-gradient(#e74c3c, #f1c40f);
background: -moz-linear-gradient(#e74c3c, #f1c40f);
background: linear-gradient(#e74c3c, #f1c40f);

Код градиента:

background: -webkit-linear-gradient(#01d9fe, #1558f3);
background: -o-linear-gradient(#01d9fe, #1558f3);
background: -moz-linear-gradient(#01d9fe, #1558f3);
background: linear-gradient(#01d9fe, #1558f3);

Код градиента:

background: -webkit-linear-gradient(#a4e786, #5ad427);
background: -o-linear-gradient(#a4e786, #5ad427);
background: -moz-linear-gradient(#a4e786, #5ad427);
background: linear-gradient(#a4e786, #5ad427);

Код градиента:

background: -webkit-linear-gradient(#3d68bf, #0d1423);
background: -o-linear-gradient(#3d68bf, #0d1423);
background: -moz-linear-gradient(#3d68bf, #0d1423);
background: linear-gradient(#3d68bf, #0d1423);

Код градиента:

background: -webkit-linear-gradient(#dadaef, #8e9198);
background: -o-linear-gradient(#dadaef, #8e9198);
background: -moz-linear-gradient(#dadaef, #8e9198);
background: linear-gradient(#dadaef, #8e9198);

Код градиента:

background: -webkit-linear-gradient(#fedd45, #eebb0a);
background: -o-linear-gradient(#fedd45, #eebb0a);
background: -moz-linear-gradient(#fedd45, #eebb0a);
background: linear-gradient(#fedd45, #eebb0a);

Код градиента:

background: -webkit-linear-gradient(#d8c786, #75662a);
background: -o-linear-gradient(#d8c786, #75662a);
background: -moz-linear-gradient(#d8c786, #75662a);
background: linear-gradient(#d8c786, #75662a);

Код градиента:

background: -webkit-linear-gradient(#c65e57, #873630);
background: -o-linear-gradient(#c65e57, #873630);
background: -moz-linear-gradient(#c65e57, #873630);
background: linear-gradient(#c65e57, #873630);