เครื่องมือนักพัฒนา

สร้าง CSS Gradient

สร้าง CSS gradients แบบ linear และ radial สวยงามพร้อมดูตัวอย่างสด

Gradient Settings

90°180°270°360°
#6366F1
0%
#8B5CF6
100%

CSS Output

background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);

CSS Gradient Generator

Create beautiful linear and radial CSS gradients with a live preview. Add multiple color stops, adjust angles, and copy the ready-to-use CSS code in one click.

FAQ

What is a CSS gradient?

A CSS gradient is a smooth transition between two or more colors generated by the browser — no image file needed. Use background: linear-gradient() or radial-gradient().

How do I make a gradient with transparency?

Use rgba() or hsla() colors with an alpha value less than 1, or use the keyword 'transparent' as one of the color stops.

What is the difference between linear and radial gradients?

Linear gradients transition along a straight line (e.g. top to bottom). Radial gradients radiate outward from a center point in a circle or ellipse.

ไม่เจอสิ่งที่ต้องการ?

เราสร้างเครื่องมือฟรีจากข้อเสนอแนะของชุมชน หากมีเครื่องมือที่จะช่วยเวิร์กโฟลว์ของคุณ แนะนำได้เลย!

CSS Gradient Generator — Free Tool Online | FreeTool24 | FreeTool24