Gradien CSS Dalam Talian - Penjana, Pembuat dan Latar Belakang

Color

Alat Kecerunan CSS Dalam Talian

CSS Gradient ialah tapak web kecil yang gembira dan alat percuma yang membolehkan anda mencipta latar belakang kecerunan untuk tapak web. 

Kecerunan CSS membolehkan anda memaparkan peralihan yang lancar antara dua atau lebih warna yang ditentukan.

CSS mentakrifkan dua jenis kecerunan:

  • Kecerunan Linear (turun/atas/kiri/kanan/menjuru)
  • Kecerunan Jejari (ditakrifkan oleh pusatnya)

Kecerunan Linear CSS

Untuk mencipta kecerunan linear anda mesti menentukan sekurang-kurangnya dua hentian warna. Hentian warna ialah warna yang anda ingin berikan peralihan yang lancar. Anda juga boleh menetapkan titik permulaan dan arah (atau sudut) bersama-sama dengan kesan kecerunan.

Sintaks

background-image: linear-gradient(directioncolor-stop1color-stop2, ...);

CSS Radial Gradients

A radial gradient is defined by its center.

To create a radial gradient you must also define at least two color stops.

Syntax

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

By default, shape is ellipse, size is farthest-corner, and position is center.

Set Shape

The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.

The following example shows a radial gradient with the shape of a circle: