60 phông chữ đa ngôn ngữ, 5000+ biểu tượng, 9 định dạng ảnh, kết cấu gradient, tô sáng văn bản — mọi tham số đều có thể xem trước theo thời gian thực
—1/201/101/81/61/51/41/31/10,1/201/4,1/2040,10,5,1020,10,20,605000+ Tabler Icons với phong cách Outline và Filled, có thể tùy chỉnh kích thước
Tham chiếu tham số API đầy đủ, hướng dẫn tô sáng văn bản, chế độ chỉ hiển thị biểu tượng
Sử dụng {{...}} trong tham số text để bọc các phần văn bản cần tô sáng. Tất cả các đoạn được tô sáng dùng chung một kiểu.Mẹo: Bạn cũng có thể nhập {{...}} trực tiếp vào ô nhập Nội dung văn bản ở trên — hệ thống sẽ tự động phát hiện và áp dụng hiệu ứng tô sáng.
hlcolor
Màu tô sáng
Đặt màu tô sáng. Hỗ trợ định dạng HEX (ví dụ: FF5733) hoặc tên màu (ví dụ: red).
?text=Mock{{Img}}.Dev&hlcolor=FF5733
hlcolor2
Màu gradient tô sáng 2
Đặt màu thứ hai cho gradient tô sáng. Đặt tham số này sẽ tự động bật hiệu ứng gradient, với hlcolor làm màu bắt đầu.
?text={{Hello}}&hlcolor=EC4899&hlcolor2=8B5CF6
hlgradient
Hướng gradient tô sáng
Đặt hướng gradient. Mặc định là horizontal khi không đặt.
horizontal Ngang (trái sang phải)
vertical Dọc (trên xuống dưới)
diagonal Chéo (trên-trái xuống dưới-phải)
?text={{Hello}}&hlcolor=EC4899&hlcolor2=8B5CF6&hlgradient=vertical
hlfont
Phông chữ tô sáng
Chỉ định phông chữ độc lập cho văn bản được tô sáng. Giá trị là tên tệp phông chữ (không bao gồm phần mở rộng .ttf).
?text={{Brand}}&hlfont=Poppins-Bold
hlbold
In đậm tô sáng
Làm cho văn bản được tô sáng in đậm. Giá trị: true hoặc 1.
?text={{Important}}&hlbold=true
https://mockimg.dev/600x400.png?text=Mock{{Img}}.Dev&hlcolor=FF5733
Hiệu ứng:"MockImg.Dev" — Img hiển thị màu đỏ
https://mockimg.dev/600x400.png?text={{Gradient}}&hlcolor=EC4899&hlcolor2=8B5CF6
Hiệu ứng: "Gradient" hiển thị gradient ngang từ hồng đến tím
https://mockimg.dev/600x400.png?text={{MockImg}}&hlfont=Poppins-Bold&hlcolor=3B82F6
Hiệu ứng: "MockImg" hiển thị màu xanh dương với phông Poppins-Bold
https://mockimg.dev/600x400.png?text={{Important}}&hlbold=true&hlcolor=EF4444
Hiệu ứng: "Important" hiển thị màu đỏ in đậm
https://mockimg.dev/600x400.png?text={{Premium}}&hlcolor=FFD700&hlcolor2=FF6B6B&hlgradient=diagonal&hlfont=Montserrat-Bold
Hiệu ứng: "Premium" hiển thị gradient chéo (vàng đến đỏ) với phông Montserrat-Bold
https://mockimg.dev/600x400.png?text={{MockImg}}+和+{{占位图}}&hlcolor=3B82F6
Hiệu ứng: "MockImg" và văn bản giữ chỗ đều hiển thị màu xanh dương (chia sẻ kiểu đánh dấu)
https://mockimg.dev/600x400.png?text={{MockImg}}+占位图服务&hlcolor=10B981
Hiệu ứng: "MockImg" hiển thị màu xanh lá, phần còn lại dùng màu mặc định
https://mockimg.dev/600x400.png?theme=dark&text=Dark+{{Mode}}&hlcolor=FBBF24
Hiệu ứng: Trong chế độ tối, "Mode" hiển thị đánh dấu màu vàng
{{...}} không được tính trong phép tính chiều rộng văn bản và không ảnh hưởng đến bố cục{{...}} lồng nhau — đánh dấu bên trong được coi là văn bản thuần túyhl*\n để xuống dòng)icontext, hoặc text để trốngTự động: kích thước biểu tượng = 80% chiều nhỏ hơn của hình ảnh (tối thiểu 24px, tối đa 90%)
Tùy chỉnh: sử dụng tham số iconsize để ghi đè tính toán tự động
https://mockimg.dev/600x400.png?icon=outline/heart&iconcolor=FF5733
Hiệu ứng: Biểu tượng trái tim tự động phóng to và căn giữa màu đỏ
https://mockimg.dev/600x400.png?icon=filled/star&iconcolor=FFD700&iconcolor2=FF6B6B&icongradient=diagonal
Hiệu ứng: Biểu tượng ngôi sao với gradient chéo từ vàng sang đỏ
https://mockimg.dev/200x200.png?icon=outline/user&iconcolor=3B82F6&bg=transparent
Hiệu ứng: Biểu tượng người dùng trên nền trong suốt — hoàn hảo cho avatar
https://mockimg.dev/600x400.png?icon=outline/heart&iconcolor=FFFFFF&gradient=horizontal&bgcolor2=EC4899&radius=20
Hiệu ứng: Biểu tượng trái tim trắng trên nền gradient hồng với góc bo tròn
https://mockimg.dev/600x400.png?icon=filled/star&iconcolor=FFD700&theme=dark
Hiệu ứng: Biểu tượng ngôi sao vàng trên nền tối
https://mockimg.dev/400x400.png?icon=outline/user&iconcolor=3B82F6&radius=200&border=4&bordercolor=3B82F6
Hiệu ứng: Biểu tượng người dùng trong hình tròn có viền — lý tưởng cho ảnh giữ chỗ avatar
| Chế độ | URL | Hiệu ứng |
|---|---|---|
| Chỉ biểu tượng (không văn bản) | ?icon=outline/heart |
Biểu tượng tự động phóng to và căn giữa, không có văn bản |
| Biểu tượng + Văn bản trống | ?icon=outline/heart&text= |
Giống như chế độ chỉ biểu tượng |
| Biểu tượng + Văn bản | ?icon=outline/heart&text=Love |
Biểu tượng và văn bản cạnh nhau (hành vi gốc) |
| Không biểu tượng không văn bản | 600x400.png |
Văn bản kích thước (hành vi mặc định) |
iconcolor, iconcolor2, icongradient, iconsize) hoạt động bình thường32x32.ico?icon=filled/star&iconcolor=FFD700Tham số padding điều khiển khoảng trắng quanh văn bản và biểu tượng. Hỗ trợ 4 định dạng: pixel đơn, tỷ lệ đơn, hai giá trị (dọc + ngang), bốn giá trị (CSS theo chiều kim đồng hồ).
Khi không truyền padding, giá trị mặc định được sử dụng (giống phiên bản trước):
20
Giá trị pixel đơn
Bốn cạnh sử dụng cùng giá trị pixel.
padding=20
1/6
Giá trị tỷ lệ đơn
Bốn cạnh sử dụng tỷ lệ. Trên/dựa trên chiều cao, trái/phải dựa trên chiều rộng. Kết quả tự động làm tròn.
padding=1/6 → 600×400 → trên/dưới 67px, trái/phải 100px 10,20
Hai giá trị (dọc + ngang)
Điều khiển khoảng đệm dọc và ngang riêng biệt. Có thể kết hợp pixel và tỷ lệ.
padding=10,20 → trên/dưới 10px, trái/phải 20pxpadding=1/8,15 → trên/dưới = chiều cao/8, trái/phải 15pxpadding=30,1/10 → trên/dưới 30px, trái/phải = chiều rộng/10 10,20,30,40
Bốn giá trị (CSS theo chiều kim đồng hồ)
Điều khiển CSS độc lập: trên, phải, dưới, trái. Trên/dựa trên chiều cao, trái/phải trên chiều rộng. Kết hợp pixel và tỷ lệ được.
padding=10,20,30,40 → trên 10, phải 20, dưới 30, trái 40 (tất cả px)padding=1/8,1/6,15,1/10 → trên h/8, phải w/6, dưới 15px, trái w/10 (kết hợp) https://mockimg.dev/480x200.svg?text=IP&bold=true&padding=1/10
Văn bản ngắn như "IP" dùng padding=1/10 cho bố cục gọn hơn.
https://mockimg.dev/600x400.svg?text=Full&padding=0
Đặt padding=0 để nội dung lấp đầy toàn bộ hình ảnh.
https://mockimg.dev/600x400.svg?icon=outline/heart&text=Love&padding=1/8
Biểu tượng và văn bản cạnh nhau với khoảng đệm vừa phải.
https://mockimg.dev/600x300.svg?text=Title&padding=40,10,5,10
Khoảng đệm trên lớn tạo cảm giác tiêu đề, dưới nhỏ gọn.
https://mockimg.dev/800x400.svg?text=Content&padding=20,10,20,60
Khoảng đệm trái lớn để phù hợp thanh điều hướng.