Tạo Gradient

Tạo CSS Gradient - Tạo Gradient Đẹp Mắt

Công cụ tạo CSS gradient mạnh mẽ tạo gradient tuyến tính và xuyên tâm với nhiều màu. Có xem trước trực tiếp, hướng và vị trí tùy chỉnh, gradient có sẵn, và xuất code CSS sẵn sàng sử dụng. Hoàn hảo cho web designers và developers tạo thiết kế web hiện đại.

CSS gradient là gì?

CSS gradient là sự chuyển đổi mượt mà giữa hai hoặc nhiều màu. Nó được tạo bằng CSS và không cần hình ảnh, rất phù hợp cho thiết kế web hiện đại.

Các loại gradient:

Gradient Tuyến tính (Linear):
- Màu chuyển đổi theo đường thẳng
- Có thể đi theo bất kỳ hướng nào (ngang, dọc, chéo)
- Cú pháp: linear-gradient(hướng, màu1, màu2, ...)
- Ví dụ: linear-gradient(to right, #FF6B6B, #4ECDC4)
- Loại phổ biến nhất

Gradient Xuyên tâm (Radial):
- Màu tỏa ra từ điểm trung tâm
- Tạo hình tròn hoặc hình elip
- Cú pháp: radial-gradient(shape at position, màu1, màu2, ...)
- Ví dụ: radial-gradient(circle at center, #FF6B6B, #4ECDC4)
- Tuyệt vời cho hiệu ứng spotlight

Lợi ích:
- Không cần file hình ảnh (tải nhanh hơn)
- Scale được với bất kỳ kích thước nào
- Dễ tùy chỉnh
- Hiệu suất tốt hơn
- Kích thước file nhỏ hơn

Làm thế nào để sử dụng hướng gradient?

Hướng gradient kiểm soát màu chảy theo hướng nào:

Hướng Gradient Tuyến tính:

Hướng Từ khóa:
- to right: Trái sang phải →
- to left: Phải sang trái ←
- to bottom: Trên xuống dưới ↓
- to top: Dưới lên trên ↑
- to bottom right: Chéo ↘
- to top left: Chéo ↖

Hướng Góc:
- 0deg = to top ↑
- 90deg = to right →
- 180deg = to bottom ↓
- 270deg = to left ←
- Bất kỳ góc nào từ 0-360deg

Vị trí Gradient Xuyên tâm:
- center: Giữa element
- top/bottom/left/right: Vị trí cạnh
- top left, top right, v.v.: Vị trí góc
- Tùy chỉnh: at 30% 70% (x% y%)

Ví dụ:
linear-gradient(to right, red, blue)
linear-gradient(45deg, red, blue)
radial-gradient(circle at top left, red, blue)

Mẹo: Dùng góc để kiểm soát chính xác, từ khóa cho hướng phổ biến.

Color stops là gì và hoạt động như thế nào?

Color stops xác định vị trí mỗi màu xuất hiện trong gradient:

Khái niệm Cơ bản:
- Vị trí là phần trăm (0-100%)
- 0% = đầu gradient
- 100% = cuối gradient
- Trình duyệt chuyển đổi mượt mà giữa các stops

Ví dụ:

Hai Màu:
red 0%, blue 100%
- Chuyển đổi mượt từ đỏ sang xanh dương

Ba Màu:
red 0%, yellow 50%, blue 100%
- Đỏ → vàng (nửa đầu)
- Vàng → xanh dương (nửa sau)

Hard Stops:
red 0%, red 50%, blue 50%, blue 100%
- Không chuyển đổi, thay đổi màu sắc nét tại 50%

Phân bổ Không đều:
red 0%, yellow 20%, blue 100%
- Chuyển đổi nhanh từ đỏ sang vàng
- Chuyển đổi dài từ vàng sang xanh dương

Mẹo:
- Nhiều stops = nhiều màu hơn
- Khoảng cách đều = gradient mượt
- Stops gần = chuyển đổi sắc nét
- Thử nghiệm với vị trí cho hiệu ứng độc đáo

Công cụ này cho phép bạn thêm color stops không giới hạn và điều chỉnh vị trí với slider.

Làm thế nào để tạo gradient nhiều màu?

Tạo gradient nhiều màu:

Các bước:
1. Bắt đầu với 2 màu (mặc định)
2. Nhấp nút "Thêm Màu"
3. Chọn màu cho stop mới
4. Điều chỉnh vị trí (0-100%)
5. Lặp lại cho nhiều màu hơn
6. Sắp xếp lại bằng cách thay đổi vị trí

Phân bổ Màu:

Phân bổ Đều:
3 màu: 0%, 50%, 100%
4 màu: 0%, 33%, 67%, 100%
5 màu: 0%, 25%, 50%, 75%, 100%

Phân bổ Tùy chỉnh:
Tạo nhấn mạnh cho màu nhất định:
- red 0%
- orange 10%
- yellow 90%
- green 100%
Điều này giữ phần orange-yellow dài hơn

Hiệu ứng Cầu vồng:
Đỏ 0% → Cam 16% → Vàng 33% → Xanh lục 50% → Xanh dương 66% → Chàm 83% → Tím 100%

Hiệu ứng Hoàng hôn:
#FF512F 0% → #DD2476 50% → #4ECDC4 100%

Mẹo:
- Bắt đầu đơn giản (2-3 màu)
- Thêm màu dần dần
- Dùng màu tương tự cho blend mượt
- Dùng màu tương phản cho hiệu ứng táo bạo
- Vị trí quan trọng hơn bạn nghĩ

Công cụ này giúp dễ dàng thêm, xóa và điều chỉnh màu một cách trực quan.

Gradient có sẵn là gì?

Gradient có sẵn là các tổ hợp màu được thiết kế sẵn:

Gradient Có sẵn:

Sunset (Hoàng hôn):
- Màu: #FF512F → #DD2476
- Cam ấm đến hồng rực rỡ
- Tuyệt cho headers, CTAs

Ocean (Đại dương):
- Màu: #2E3192 → #1BFFFF
- Xanh dương đậm đến cyan
- Hoàn hảo cho chủ đề nước

Forest (Rừng):
- Màu: #134E5E → #71B280
- Teal tối đến xanh lục
- Hiệu ứng tự nhiên, dịu nhẹ

Peachy (Đào):
- Màu: #ED4264 → #FFEDBC
- Hồng đến kem đào
- Diện mạo mềm mại, thanh lịch

Purple Dream (Giấc mơ Tím):
- Màu: #A770EF → #CF8BF3 → #FDB99B
- Gradient tím đến hồng
- Hiện đại, trendy

Cool Sky (Bầu trời Mát):
- Màu: #2980B9 → #6DD5FA → #FFFFFF
- Xanh dương đến trắng
- Sạch sẽ, chuyên nghiệp

Warm Flame (Ngọn lửa Ấm):
- Màu: #FF9A56 → #FF6A88 → #FF99AC
- Tông cam-hồng ấm
- Năng động, đam mê

Night Fade (Phai Đêm):
- Màu: #A18CD1 → #FBC2EB
- Phai tím đến hồng
- Mơ màng, huyền bí

Sử dụng Preset:
- Nhấp bất kỳ preset nào để áp dụng
- Tùy chỉnh màu sau khi áp dụng
- Dùng như điểm khởi đầu
- Học tổ hợp màu

Preset tuyệt vời cho cảm hứng và kết quả nhanh!

Tính năng chính

• Tạo gradient tuyến tính và xuyên tâm
• Xem trước trực tiếp với cập nhật tức thì
• Thêm color stops không giới hạn
• Điều chỉnh vị trí màu chính xác
• Nhiều tùy chọn hướng
• Hỗ trợ góc tùy chỉnh (0-360°)
• 8 gradient có sẵn đẹp mắt
• Sao chép code CSS vào clipboard
• Tạo gradient ngẫu nhiên
• Đảo ngược hướng gradient
• Xóa color stops (tối thiểu 2)
• Xuất CSS sẵn sàng sử dụng
• Xử lý 100% phía client
• Không giao tiếp server
• Hoạt động offline
• Hỗ trợ chế độ tối
• Giao diện thân thiện với mobile