สร้างข้อความไล่สี CSS - DevToolBox

Create beautiful gradient text effects with CSS. Live preview, multiple colors, angle control, font size and weight. Copy ready-to-use CSS code ฟรี ไม่ต้องสมัครสมาชิก

Settings

Preview Text

Color 1

Color 2

Color 3 (optional)

Angle: 135°

Font Size: 48px

Font Weight: 800

Presets

Gradient Text

CSS Code

.gradient-text {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 48px;
  font-weight: 800;
}

What is CSS Gradient Text?

CSS Gradient Text Generator creates colorful gradient effects on text using CSS background-clip and -webkit-text-fill-color properties. Customize colors, angles, font size, and weight with real-time preview and copy-ready CSS code.

𝕏 Twitter in LinkedIn

ให้คะแนนเครื่องมือนี้

3.9 / 5 · 209 คะแนน

เครื่องมือเพิ่มเติม

🪟สร้าง CSS Glassmorphism 🫧สร้าง CSS Neumorphism 🌈Css Gradient Generator 🌓CSS Shadow Generator

อัปเดตข่าวสาร

รับเคล็ดลับการพัฒนาและเครื่องมือใหม่ทุกสัปดาห์

ไม่มีสแปม ยกเลิกได้ตลอดเวลา

Enjoy these free tools?

☕Buy Me a Coffee

How to Use

Enter your preview text
Choose gradient colors (2 or 3 colors)
Adjust the angle, font size, and weight
Try preset color combinations
Copy the CSS code

Use Cases

Create eye-catching headings for websites
Design gradient logos and titles
Add visual interest to landing pages
Build colorful text effects for marketing pages

FAQ

How does gradient text work in CSS?

It uses background with a gradient, then background-clip: text and -webkit-text-fill-color: transparent to show the gradient through the text shape.

Is gradient text supported by all browsers?

Yes, it works in all modern browsers. The -webkit- prefix ensures compatibility with older versions of Chrome and Safari.

Can I use more than 2 colors?

Yes, this generator supports up to 3 colors. The third color is optional.