Ví dụ về background gradient ellipse

Background gradient

Background gradient: Có thể tạo màu sắc của background theo biên độ màu giảm dần.

HTML viết:

<html>
<head></head>
<body>
<div>background gradient background gradient background gradient background gradient background gradient.</div>
</body>
</html>

vị trí: top left - kích thước: closest-side

CSS viết:

div {
        background: -moz-radial-gradient(top left, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(top left, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(top left, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(top left, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: top left - kích thước: closest-corner

CSS viết:

div {
        background: -moz-radial-gradient(top left, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(top left, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(top left, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(top left, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: top left - kích thước: farthest-side

CSS viết:

div {
        background: -moz-radial-gradient(top left, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(top left, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(top left, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(top left, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: top left - kích thước: farthest-corner

CSS viết:

div {
        background: -moz-radial-gradient(top left, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(top left, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(top left, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(top left, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: top center - kích thước: closest-side

CSS viết:

div {
        background: -moz-radial-gradient(top center, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(top center, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(top center, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(top center, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: top center - kích thước: closest-corner

CSS viết:

div {
        background: -moz-radial-gradient(top center, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(top center, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(top center, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(top center, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: top center - kích thước: farthest-side

CSS viết:

div {
        background: -moz-radial-gradient(top center, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(top center, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(top center, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(top center, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: top center - kích thước: farthest-corner

CSS viết:

div {
        background: -moz-radial-gradient(top center, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(top center, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(top center, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(top center, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: top right - kích thước: closest-side

CSS viết:

div {
        background: -moz-radial-gradient(top right, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(top right, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(top right, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(top right, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: top right - kích thước: closest-corner

CSS viết:

div {
        background: -moz-radial-gradient(top right, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(top right, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(top right, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(top right, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: top right - kích thước: farthest-side

CSS viết:

div {
        background: -moz-radial-gradient(top right, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(top right, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(top right, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(top right, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: top right - kích thước: farthest-corner

CSS viết:

div {
        background: -moz-radial-gradient(top right, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(top right, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(top right, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(top right, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: center left - kích thước: closest-side

CSS viết:

div {
        background: -moz-radial-gradient(center left, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(center left, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(center left, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(center left, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: center left - kích thước: closest-corner

CSS viết:

div {
        background: -moz-radial-gradient(center left, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(center left, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(center left, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(center left, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: center left - kích thước: farthest-side

CSS viết:

div {
        background: -moz-radial-gradient(center left, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(center left, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(center left, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(center left, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: center left - kích thước: farthest-corner

CSS viết:

div {
        background: -moz-radial-gradient(center left, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(center left, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(center left, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(center left, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: center center - kích thước: closest-side

CSS viết:

div {
        background: -moz-radial-gradient(center center, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(center center, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(center center, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(center center, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: center center - kích thước: closest-corner

CSS viết:

div {
        background: -moz-radial-gradient(center center, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(center center, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(center center, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(center center, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: center center - kích thước: farthest-side

CSS viết:

div {
        background: -moz-radial-gradient(center center, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(center center, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(center center, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(center center, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: center center - kích thước: farthest-corner

CSS viết:

div {
        background: -moz-radial-gradient(center center, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(center center, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(center center, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(center center, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: center right - kích thước: closest-side

CSS viết:

div {
        background: -moz-radial-gradient(center right, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(center right, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(center right, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(center right, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: center right - kích thước: closest-corner

CSS viết:

div {
        background: -moz-radial-gradient(center right, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(center right, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(center right, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(center right, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: center right - kích thước: farthest-side

CSS viết:

div {
        background: -moz-radial-gradient(center right, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(center right, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(center right, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(center right, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: center right - kích thước: farthest-corner

CSS viết:

div {
        background: -moz-radial-gradient(center right, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(center right, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(center right, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(center right, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: bottom left - kích thước: closest-side

CSS viết:

div {
        background: -moz-radial-gradient(bottom left, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(bottom left, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(bottom left, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(bottom left, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: bottom left - kích thước: closest-corner

CSS viết:

div {
        background: -moz-radial-gradient(bottom left, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(bottom left, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(bottom left, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(bottom left, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: bottom left - kích thước: farthest-side

CSS viết:

div {
        background: -moz-radial-gradient(bottom left, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(bottom left, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(bottom left, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(bottom left, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: bottom left - kích thước: farthest-corner

CSS viết:

div {
        background: -moz-radial-gradient(bottom left, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(bottom left, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(bottom left, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(bottom left, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: bottom center - kích thước: closest-side

CSS viết:

div {
        background: -moz-radial-gradient(bottom center, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(bottom center, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(bottom center, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(bottom center, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: bottom center - kích thước: closest-corner

CSS viết:

div {
        background: -moz-radial-gradient(bottom center, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(bottom center, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(bottom center, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(bottom center, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: bottom center - kích thước: farthest-side

CSS viết:

div {
        background: -moz-radial-gradient(bottom center, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(bottom center, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(bottom center, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(bottom center, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: bottom center - kích thước: farthest-corner

CSS viết:

div {
        background: -moz-radial-gradient(bottom center, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(bottom center, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(bottom center, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(bottom center, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: bottom right - kích thước: closest-side

CSS viết:

div {
        background: -moz-radial-gradient(bottom right, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(bottom right, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(bottom right, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(bottom right, ellipse closest-side, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: bottom right - kích thước: closest-corner

CSS viết:

div {
        background: -moz-radial-gradient(bottom right, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(bottom right, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(bottom right, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(bottom right, ellipse closest-corner, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: bottom right - kích thước: farthest-side

CSS viết:

div {
        background: -moz-radial-gradient(bottom right, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(bottom right, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(bottom right, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(bottom right, ellipse farthest-side, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.

vị trí: bottom right - kích thước: farthest-corner

CSS viết:

div {
        background: -moz-radial-gradient(bottom right, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        background: -o-radial-gradient(bottom right, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        background: -ms-radial-gradient(bottom right, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        background: -webkit-radial-gradient(bottom right, ellipse farthest-corner, #ffffff 0%, #cc0000 100%);
        height: 200px;
}

Hiển thị trình duyệt khi sử dụng background gradient:

background gradient background gradient background gradient background gradient background gradient.