0

การไล่ระดับสีพาสเทล CSS — โค้ดสำเร็จรูป

สร้างการไล่ระดับสี CSS แบบมองเห็นได้: แบบเชิงเส้น แนวรัศมี หรือทรงกรวย แถบเลื่อนมุม และการหยุดสีสูงสุด 6 สีพร้อมการแสดงตัวอย่างแบบเต็มความกว้างแบบสดและโค้ดที่คัดลอกได้

90°
กำลังประมวลผล... 0%

ผลลัพธ์

หน้านี้จะเปิดเครื่องสร้างการไล่ระดับสีพร้อมกับเฟดสีพาสเทลสำเร็จรูป: สีชมพูแป้ง #ffdde1 ผสมผสานเข้ากับดอกกุหลาบที่เต็มไปด้วยฝุ่น #ee9ca7 แผงแสดงตัวอย่างจะแสดงผลลัพธ์แบบนุ่มนวลทันที โดยมีบรรทัด CSS พร้อมอยู่ด้านล่าง

การไล่ระดับสีพาสเทลทำงานในที่ที่สีอิ่มตัวจะตะโกน: หน้าจอเริ่มต้น การ์ด สภาพว่างเปล่า และแบรนด์ความงามหรือไลฟ์สไตล์ เนื่องจากทั้งสองจุดเป็นแบบสว่าง ข้อความสีเข้มจึงสามารถอ่านได้บนพื้นผิวทั้งหมด ซึ่งเป็นสิ่งที่การไล่ระดับสีที่สดใสที่สุดไม่สามารถนำเสนอได้หากไม่มีการซ้อนทับ

คัดลอกเส้นตามที่เป็นอยู่หรือทำให้นุ่มนวลขึ้นโดยการใช้เทคนิคความทึบที่อยู่ติดกัน: เลื่อนจุดหยุดดอกกุหลาบไปที่ 80% แล้วปล่อยให้สีชมพูครอบงำ หรือพลิกไปใช้ประเภทรัศมีเพื่อให้เรืองแสงตรงกลางอย่างอ่อนโยน เครื่องมือจะอัปเดต CSS ที่สามารถคัดลอกได้ในทุกอินพุต