เครื่องมือไล่ระดับ CSS ออนไลน์
CSS Gradient เป็นเว็บไซต์เล็กๆ ที่มีความสุขและเครื่องมือฟรีที่ช่วยให้คุณสร้างพื้นหลังแบบไล่ระดับสีสำหรับเว็บไซต์ได้
การไล่ระดับสี CSS ช่วยให้คุณแสดงการเปลี่ยนที่ราบรื่นระหว่างสีที่ระบุตั้งแต่สองสีขึ้นไป
CSS กำหนดสองประเภทของการไล่ระดับสี:
- การไล่ระดับสีเชิงเส้น (ลง/ขึ้น/ซ้าย/ขวา/แนวทแยง)
- Radial Gradients (กำหนดโดยจุดศูนย์กลาง)
CSS Linear Gradients
ในการสร้างการไล่ระดับสีเชิงเส้น คุณต้องกำหนดจุดหยุดสีอย่างน้อยสองจุด สต็อปสีคือสีที่คุณต้องการทำให้การเปลี่ยนสีเป็นไปอย่างราบรื่น คุณยังสามารถกำหนดจุดเริ่มต้นและทิศทาง (หรือมุม) พร้อมกับเอฟเฟกต์การไล่ระดับสี
ไวยากรณ์
background-image: linear-gradient(direction, color-stop1, color-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:
