Градиент примеры код

Опубликовано 2021-10-30 автором stariс

Все шпаргалки
Cпецсимволы HTML
CSS Курсор
CSS все свойства
CSS псевдоэлементы
Регулярные выражения для Notepad++
Цвета HTML
Горячие клавиши
Единицы измерения в web
HTML5 все теги
микроразметка microformats.org (микроформат)
микроразметка schema.org (микродата)

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

Код:



HTML

<div></div>

CSS

div{

width:100%;

height:80px;

border:1px solid #00BFFF;

background:linear-gradient(#00BFFF, #fff);

Код:



HTML

<div></div>

CSS

div{

width:100%;

height:80px;

border:1px solid #00BFFF;

background:linear-gradient(to top, #00BFFF, #fff);

Код:



HTML

<div></div>

CSS

div{

width:100%;

height:80px;

border:1px solid #00BFFF;

background:linear-gradient(to left top, #00BFFF, #fff);

Код:



HTML

<div></div>

CSS

div{

width:100%;

height:80px;

border:1px solid #00BFFF;

background:linear-gradient(to right top, #00BFFF, #fff);

Код:



HTML

<div></div>

CSS

div{

width:100%;

height:80px;

border:1px solid #00BFFF;

background:linear-gradient(to left, #00BFFF, #fff);

Код:



HTML

<div></div>

CSS

div{

width:100%;

height:80px;

border:1px solid #00BFFF;

background:linear-gradient(to right, #00BFFF, #fff);

Код:



HTML

<div></div>

CSS

div{

width:100%;

height:80px;

border:1px solid #00BFFF;

background:linear-gradient( to left bottom, #00BFFF, #fff);

Код:



HTML

<div></div>

CSS

div{

width:100%;

height:80px;

border:1px solid #00BFFF;

background:linear-gradient( to right bottom, #00BFFF, #fff);

Код:



HTML

<div></div>

CSS

div{

width:100%;

height:80px;

border:1px solid #00BFFF;

background:linear-gradient(#1E90FF, #00BFFF, #fff);

Код:



HTML

<div></div>

CSS

div{

width:100%;

height:80px;

border:1px solid #00BFFF;

background:linear-gradient(#FF0000, #1E90FF, #00BFFF, #fff, #FFD700);

Код:



HTML

<div></div>

CSS

div{

width:100%;

height:80px;

border:1px solid #00BFFF;

background:linear-gradient(-45deg, #00BFFF 33%, #fff 33%, #fff 66%, #00BFFF 33%);

background-size: 180px 100px;

Код:



HTML

<div></div>

CSS

div{

width:100%;

height:80px;

border:1px solid #00BFFF;

background: repeating-linear-gradient(45deg, #00BFFF, #00BFFF 30px, #fff 30px, #fff 60px, #00BFFF 60px);

Код:



HTML

<div></div>

CSS

div{

width:100%;

height:80px;

border:1px solid #00BFFF;

background: repeating-linear-gradient(90deg, #00BFFF, #00BFFF 30px, #fff 30px, #fff 60px, #00BFFF 60px);

Код:



HTML

<div></div>

CSS

div{

width:100%;

height:80px;

border:1px solid #00BFFF;

background: repeating-linear-gradient(180deg, #00BFFF, #00BFFF 10px, #fff 10px, #fff 20px, #00BFFF 20px);

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

Код:



HTML

<div></div>

CSS

div{

width:100%;

height:80px;

border:1px solid #00BFFF;

background:radial-gradient(#fff, #00BFFF);

Код:



HTML

<div></div>

CSS

div{

width:100%;

height:80px;

border:1px solid #00BFFF;

background:radial-gradient(#fff, #1E90FF, #00BFFF);

Код:



HTML

<div></div>

CSS

div{

width:100%;

height:80px;

border:1px solid #00BFFF;

background:radial-gradient(circle, #fff, #1E90FF, #00BFFF);

Код:



HTML

<div></div>

CSS

div{

width:100%;

height:80px;

border:1px solid #00BFFF;

background:radial-gradient(at left top, #fff, #1E90FF, #00BFFF);

Код:



HTML

<div></div>

CSS

div{

width:100%;

height:80px;

border:1px solid #00BFFF;

background:radial-gradient(at top, #fff, #1E90FF, #00BFFF);

Код:



HTML

<div></div>

CSS

div{

width:100%;

height:80px;

border:1px solid #00BFFF;

background:radial-gradient(at right top, #fff, #1E90FF, #00BFFF);

Код:



HTML

<div></div>

CSS

div{

width:100%;

height:80px;

border:1px solid #00BFFF;

background:radial-gradient(at right, #fff, #1E90FF, #00BFFF);

Код:



HTML

<div></div>

CSS

div{

width:100%;

height:80px;

border:1px solid #00BFFF;

background:radial-gradient(at right bottom, #fff, #1E90FF, #00BFFF);

Код:



HTML

<div></div>

CSS

div{

width:100%;

height:80px;

border:1px solid #00BFFF;

background:radial-gradient(at bottom, #fff, #1E90FF, #00BFFF);

Код:



HTML

<div></div>

CSS

div{

width:100%;

height:80px;

border:1px solid #00BFFF;

background:radial-gradient(at left bottom, #fff, #1E90FF, #00BFFF);

Код:



HTML

<div></div>

CSS

div{

width:100%;

height:80px;

border:1px solid #00BFFF;

background:radial-gradient(at left, #fff, #1E90FF, #00BFFF);

Код:



HTML

<div></div>

CSS

div{

width:100%;

height:80px;

border:1px solid #00BFFF;

background:radial-gradient(at -80% 50%, #fff, #1E90FF, #00BFFF);

Код:



HTML

<div></div>

CSS

div{

width:100%;

height:80px;

border:1px solid #00BFFF;

background:radial-gradient(40px, #fff, #1E90FF, #00BFFF);

Код:



HTML

<div></div>

CSS

div{

width:100%;

height:100px;

border:1px solid #00BFFF;

background:radial-gradient(40px, #fff, #1E90FF, #00BFFF);

background-size: 50px 50px;

Код:



HTML

<div></div>

CSS

div{

width:100%;

height:80px;

border:1px solid #00BFFF;

background:radial-gradient(circle closest-side, #fff  2px, #00BFFF 4px) 50% 50%;

background-size: 10px 10px;

Код:



HTML

<div></div>

CSS

div{

width:100%;

height:80px;

border:1px solid #00BFFF;

background: repeating-radial-gradient(circle at 0px 40px, #00BFFF, #00BFFF 2px, #fff 2px, #fff 4px, #1E90FF 4px, #1E90FF 6px);

background-size: 50px 50px;

Конический градиент

Код:



HTML

<div></div>

CSS

div{

width:100px;

height:100px;

border:1px solid #00BFFF;

border-radius:50%;

margin: 0 auto;

background:conic-gradient(#fff, #00BFFF);

Код:



HTML

<div></div>

CSS

div{

width:100px;

height:100px;

border:1px solid #00BFFF;

border-radius:50%;

margin: 0 auto;

background:conic-gradient(#00BFFF,  #fff, #00BFFF);

Код:



HTML

<div></div>

CSS

div{

width:100px;

height:100px;

border:1px solid #00BFFF;

border-radius:50%;

margin: 0 auto;

background:conic-gradient(#00BFFF,  #fff, #00BFFF);

Код:



HTML

<div></div>

CSS

div{

width:100px;

height:100px;

border:1px solid #00BFFF;

border-radius:50%;

margin: 0 auto;

background:conic-gradient(#00BFFF 0 120deg, #1E90FF 0 240deg,  #fff 0 360deg);

Код:



HTML

<div></div>

CSS

div{

width:100px;

height:100px;

border:1px solid #00BFFF;

border-radius:50%;

margin: 0 auto;

background:conic-gradient(#00BFFF 0 120deg, #1E90FF 0 240deg,  #fff 0 360deg);

Запись опубликована в рубрике Новости. Добавьте в закладки постоянную ссылку.

Градиент примеры код

Один ответ на “Градиент примеры код”

Добавить комментарий