20 Ví Dụ Gradient CSS Cho Thiết Kế Website

20 Ví Dụ Gradient CSS Cho Thiết Kế Website


Ngày 22 Tháng 12 Năm 2020

Trong bài viết hôm nay mình sẽ giới thiệu đến bạn CSS gradient là gì và cách áp dụng chúng vào thiết kế và phát triển web nhé!

Gradient Là Gì?

Gradient là một phần tử CSS với kiểu dữ liệu hình ảnh, nó được tạo ra bởi sự kết hợp hai hay nhiều màu xác định với hai loại chính là linearradial.
Do là kiểu hình ảnh nên bạn có thể sử dụng các thuộc tính dành cho hình ảnh trong CSS như là background-image, border-image... cho phần tử của website.

Linear Gradient

Bây giờ chúng ta sẽ đi vào tìm hiểu cú pháp của linear gradient nhé:

 background: linear-gradient(hướng, màu thứ nhất, màu thứ hai, ...);

Và để hiểu rõ chúng ta hãy đi vào ví dụ sau nhé:

HTML

<div class="noi-dung">Từ Trái Sang Phải</div><div class="noi-dung">Từ Trái Sang Phải</div>

CSS

body {
  text-align: center;
}
.noi-dung {
  background: linear-gradient(to right, #7A7FBA, #11C37C);
  color: white;
  padding: 6rem 1rem;
  margin: 4rem;
  font-size: 50px;
}

Và kết quả bạn xem dự án Codepen bên dưới nhé:

See the Pen wvzqOJE by haycuoilennao19 (@haycuoilennao19) on CodePen.

Bạn có thể tham khảo thêm tại Linear Gradient W3school.

Radial Gradient

Phần tiếp theo này chúng ta sẽ đi vào tìm hiểu cú pháp về radial gradient nhé:

background: radial-gradient(hình dạng at vị trí, màu bắt đầu, ..., màu kết thúc);

Và để hiểu rõ hơn thì bạn xem ví dụ cách sử dụng nó trong thực tế nhé:

HTML

<div class="noi-dung">Hình dạng hình tròn và vị trí nằm ở chính giữa</div>

CSS

body {
  text-align: center;
}
.noi-dung {
 background: radial-gradient(circle at center, #F4DD90, #0C1C5F);
  color: white;
  padding: 6rem 1rem;
  margin: 4rem;
  font-size: 50px;
}

Và kết quả bạn xem dự án bên dưới nhé:

See the Pen radial gradient by haycuoilennao19 (@haycuoilennao19) on CodePen.

Bạn có thể tham khảo thêm tại Radial Gradients W3school.

Cách Áp Dụng Gradient Vào Thực Tế

Tạo Border Cho Phần Tử

Bây giờ chúng ta sẽ đi vào tìm hiểu cách tạo đường viền cho phần tử bằng cách sử dụng gradient trong CSS nhé!

HTML

<div class="noi_dung border-gradient">Tạo Đường Viền Gradient</div>

CSS

.noi_dung {
  width: 400px;
  height: 200px;
  max-width: 100%;
  margin: 1rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.border-gradient {
  border: 10px solid;
  border-image-source: linear-gradient(45deg, #1b2a49, #bada55);
  border-image-slice: 1;
}

Kết quả border gradient bạn xem bên dưới nhé:

See the Pen tao border gradient by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tạo Text Gradient

Trong phần này chúng ta sẽ đi vào tạo text-gradient bằng đoạn mã sau đây nhé!

HTML

<div class="text-gradient">Niềm Vui Lập Trình</div>

CSS

.text-gradient {
  text-align: center;
  font-size: 100px;
  background: linear-gradient(to right, #bada55 0%, #1b2a49 100%);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color:transparent;
}

Và kết quả bạn xem bên dưới nha!

See the Pen tạo text-gradient by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tạo Bullet Gradient Cho Danh Sách

Trong phần này chúng ta sẽ đi vào tạo bullet gradient cho List thông qua đoạn mã sau đây nhé!

HTML

<ul>
  <li>Phần Tử 1</li>
  <li>Phần Tử 2</li>
  <li>Phần Tử 3</li>
</ul>

CSS

ul {
  display: block;
  margin-left: -10px;
}
ul li {
  display: block;
  position: relative;
  font-size: 50px;
}
ul li:before {
  content: "";
  position: absolute;
  top: 1.2em;
  left: -30px;
  margin-top: -0.9em;
  background:linear-gradient(to right, #8360c3, #2ebf91);
  height: 25px;
  width: 25px;
  border-radius: 50%;
}

Và kết quả bạn xem dự án Codepen bên dưới nhé!

See the Pen tạo bullet gradient cho danh sách by haycuoilennao19 (@haycuoilennao19) on CodePen.

Kết Hợp Gradient Với Hình Ảnh

Trong phần tiếp theo này chúng ta sẽ đi vào kết hợp giữa gradient với phần tử hình ảnh nhé!

HTML

<div class="noi-dung">Niềm Vui Lập Trình</div>

CSS

body {
  background: #f2f2f2;
  text-align: center;
  font-size: 50px;
}
.noi-dung {
    background-image:linear-gradient(to bottom, rgb(0, 159, 255, 0.5), rgb(236, 47, 75, 0.8)),
    url('https://niemvuilaptrinh.ams3.cdn.digitaloceanspaces.com/pexels-paul-ijsendoorn-33041.jpg');
    width: 100%;
    height: 400px;
    background-size: cover;
    color: white;
    padding: 20px;
}

Và kết quả bạn xem Codepen bên dưới nhé!

See the Pen ket hop gradient voi hinh anh by haycuoilennao19 (@haycuoilennao19) on CodePen.

Cách Tạo Gradient Button

Phần cuối cùng này chúng ta sẽ đi vào tạo gradient button cho trang web nhé!

HTML

<button class="btn">Niềm Vui Lập Trình</button>

CSS

.btn {background-image: linear-gradient(to right, #B3FFAB 0%, #12FFF7 51%, #B3FFAB 100%)}
.btn {
margin: 10px;
padding: 15px 45px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background-size: 200% auto;
color: white;
box-shadow: 0 0 20px #eee;
border-radius: 10px;
display: block;
border: none;
 cursor: pointer;
}
.btn:hover {
background-position: right center;
color: #fff;
text-decoration: none;
}

Và kết quả bạn xem bên dưới nha!

See the Pen tao button gradient by haycuoilennao19 (@haycuoilennao19) on CodePen.

Pure CSS Gradient Background Animation

Pure CSS Gradient Background Animation

Kết quả bạn xem dưới đây nha.

See the Pen Pure CSS Gradient Background Animation by Manuel Pinto (@P1N2O) on CodePen.

Gradient text color

Gradient text color

Kết quả bạn xem dưới đây nha.

See the Pen Gradient text color by Léo Campos (@leocampos) on CodePen.

Animated CSS Gradient Border

Animated CSS Gradient Border

Kết quả bạn xem dưới đây nha.

See the Pen Animated CSS Gradient Border by haycuoilennao19 (@haycuoilennao19) on CodePen.

Gradient Buttons

Gradient Buttons

Kết quả bạn xem dưới đây nha.

See the Pen Gradient Buttons with Background-Color Change (CSS-only) by MrPirrera (@pirrera) on CodePen.

CSS Gradient Text in Firefox

CSS Gradient Text in Firefox

Kết quả bạn xem dưới đây nha.

See the Pen CSS Gradient Text in Firefox by Giana (@giana) on CodePen.

CSS Image Gradient Hover Effect

CSS Image Gradient Hover Effect

Kết quả bạn xem dưới đây nha.

See the Pen CSS Gradient Hover Effect by Jon Daiello (@jondaiello) on CodePen.

Underline gradient animation

Underline gradient animation

Kết quả bạn xem dưới đây nha.

See the Pen Underline gradient animation by NickNoordijk (@NickNoordijk) on CodePen.

Gradient Menu

Gradient Menu

Kết quả bạn xem dưới đây nha.

See the Pen #CodePenChallenge - Menu - Gradient Menu by Halida Astatin (@halidaa) on CodePen.

CSS Multiple Line Gradient

CSS Multiple Line Gradient

Kết quả bạn xem dưới đây nha.

See the Pen How do I get a custom colored underline that will span multiple lines? by Will King (@Wking) on CodePen.

Gradient Spinner

Gradient Spinner

Kết quả bạn xem dưới đây nha.

See the Pen Gradient Spinner by Adam Dipinto (@AdamDipinto) on CodePen.

Gradient Collection

Gradient Collection

Kết quả bạn xem dưới đây nha.

See the Pen Gradient Collection by Tamino Martinius (@Zaku) on CodePen.

Input Range Gradient

Input Range Gradient

Kết quả bạn xem dưới đây nha.

See the Pen Color range slider by Gabriel Tomescu (@gabrieltomescu) on CodePen.

Input Text Material with Gradient

Input Text Material with Gradient

Kết quả bạn xem dưới đây nha.

See the Pen Input Text Material with Gradient by Lucas Oliveira (@lucasyem) on CodePen.

Gradient Hover Effect

Gradient Hover Effect

Kết quả bạn xem dưới đây nha.

See the Pen Gradient Hover Effect by Chris Colvin (@chrismcolvin) on CodePen.

Rainbow text hover animation

Rainbow text hover animation

Kết quả bạn xem dưới đây nha.

See the Pen Rainbow text hover animation by Sarah Fossheim (@fossheim) on CodePen.

3D Gradient Buttons

3D Gradient Buttons

Kết quả bạn xem dưới đây nha.

See the Pen 3D Gradient Buttons by Sietse (@firepenguin) on CodePen.

SVG Text Clip with Gradient

SVG Text Clip with Gradient

Kết quả bạn xem dưới đây nha.

See the Pen SVG Text Clip with Gradient & GIF by CY Park (@cypark) on CodePen.

Gradient Ordered List

Gradient Ordered List

Kết quả bạn xem dưới đây nha.

See the Pen Gradient Ordered List by Erin E. Sullivan (@erinesullivan) on CodePen.

Tile with gradient title

Tile with gradient title

Kết quả bạn xem dưới đây nha.

See the Pen Tile with gradient title by Fabio Ottaviani (@supah) on CodePen.

Progress Bar Gradients

Progress Bar Gradients

Kết quả bạn xem dưới đây nha.

See the Pen Absolute Progress Bar Gradients by Tey Tag (@pix3l) on CodePen.

Selected text gradient background

Selected text gradient background

Kết quả bạn xem dưới đây nha.

See the Pen Selected text gradient background by Andy Fought (@andyfought) on CodePen.

Gradient Backgrounds - linear, radial, duotone

Gradient Backgrounds - linear, radial, duotone

Kết quả bạn xem dưới đây nha.

See the Pen Gradient Backgrounds - linear, radial, duotone by Eric Porter (@EricPorter) on CodePen.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức để tạo gradient CSS hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!