Gradient ng CSS

Gradient background

CSS Gradient ay nagbibigay-daan sa iyo na ipakita ang maliwanag na paglilipat sa pagitan ng dalawang o higit pang tinukoy na kulay.

CSS ay naglalayong dalawang uri ng gradient:

  • Linear Gradient（bawas/itaas/kaliwa/kanan/diagonal）
  • Radial Gradient（na tinukoy ng sentro nito）

CSS Linear Gradient

Para makapaglunsad ng linear gradient, dapat kang magbigay ng kahit anong dalawang color stop. Ang color stop ay ang mga kulay na iyong gusto ipapakita sa maliwanag na paglilipat. Maari mo ring itakda ang pagsisimula at direksyon (o ang angle) at ang epekto ng gradient.

Grammar

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Linear Gradient - Mula sa Itaas hanggang sa Bawas (Default)

Ang halimbawa na ito ay nagpapakita ng linear gradient mula sa taas. Ito ay nagsisimula sa pula at lumilipat sa dilaw:

Mula sa itaas papunta sa ilalim (default)

Example

#grad {
  background-image: linear-gradient(red, yellow);
}

Try It Yourself

Linear gradient - Mula sa kaliwa papunta sa kanan

Ang mga halimbawa sa ibaba ay nagpapakita ng linear gradient na mula sa kaliwa: Ito ay nagsisimula sa kulay red at lumilipat sa kulay yellow:

Mula sa kaliwa papunta sa kanan

Example

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

Try It Yourself

Linear gradient - Diagonal

Maaari mong maisama ang horizontal at vertical na pagsisimula upang gumawa ng diagonal gradient.

Ang mga halimbawa sa ibaba ay nagpapakita ng linear gradient na mula sa itaas-lilang (sa ilalim-kanan): Ito ay nagsisimula sa kulay red at lumilipat sa kulay yellow:

Mula sa itaas-lilang papunta sa ilalim-kanan

Example

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

Try It Yourself

Gumamit ng angle

Kung gusto mong magkaroon ng mas maraming kontrol sa angle ng gradient, maaring maglagay ng isang angle, upang palitan ang predefined na direksyon (pababa, itaas, papunta sa kanan, papunta sa kaliwa, papunta sa kanang itaas, atbp.). Ang halaga ng 0deg ay katumbas ng itaas (to top). Ang 90deg ay katumbas ng papunta sa kanan (to right). Ang 180deg ay katumbas ng pababa (to bottom).

180deg

Grammar

background-image: linear-gradient(angle, color-stop1, color-stop2);

Ang angle na ito ay nagtutukoy sa ang angle sa pagitan ng horizontal line at gradient line.

Ang mga halimbawa sa ibaba ay nagpapakita kung paano gamitin ang angle sa linear gradient:

Example

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

Try It Yourself

Gumamit ng ilang color stop

Ang mga halimbawa sa ibaba ay nagpapakita ng linear gradient na may ilang color stops (mula sa itaas papunta sa ilalim):

Example

#grad {
  background-image: linear-gradient(red, yellow, green);
}

Try It Yourself

Ang mga halimbawa sa ibaba ay nagpapakita kung paano gamitin ang rainbow colors at ilang teksto upang gumawa ng linear gradient (mula sa kaliwa papunta sa kanan):

Gradient background

Example

#grad {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); 
}

Try It Yourself

Gumamit ng transparency

Ang CSS gradient ay sumusuporta sa transparency, at maaari ring gamitin upang gumawa ng epekto ng gradient.

Kung magdagdag ng transparency, gumagamit kami ng rgba() function upang tanggapin ang color swatch. Ang huling argumento ng rgba() function ay maaaring maging halaga mula 0 hanggang 1, na nagtutukoy sa transparency ng kulay: 0 ay para sa ganap na transparente, at 1 ay para sa ganap na kulay (walang transparency).

The following example shows a linear gradient starting from the left. It starts completely transparent and then transitions to full red color:

Example

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Try It Yourself

Repeated Linear Gradient

repeating-linear-gradient() Function for Repeating Linear Gradient:

Example

Repeated Linear Gradient:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

Try It Yourself