Mesh Gradient Generator

Build soft multi-point color fields with layered radial gradients. Move each focal point, tune its spread, and copy CSS without uploading anything.

background: radial-gradient(circle at 18% 20%, #7c3aed 0%, transparent 55%), radial-gradient(circle at 82% 18%, #06b6d4 0%, transparent 52%), radial-gradient(circle at 24% 82%, #f472b6 0%, transparent 52%), radial-gradient(circle at 80% 80%, #facc15 0%, transparent 48%), #0f172a;

Giới thiệu Mesh Gradient Generator

Tạo background kiểu mesh bằng nhiều lớp radial gradient. Mỗi điểm có màu, vị trí và độ lan riêng để tạo nền mềm, hữu cơ mà không cần image editor.

Cách tạo mesh gradient

  1. 1

    Chọn màu canvas

    Chọn màu nền nằm phía sau toàn bộ các gradient point.

  2. 2

    Chỉnh từng điểm

    Đổi màu và vị trí X/Y của từng point.

  3. 3

    Chỉnh độ lan

    Tăng hoặc giảm size để điều khiển vùng blend của từng màu.

  4. 4

    Sao chép CSS

    Copy khai báo radial-gradient nhiều lớp vào dự án.

Câu hỏi về mesh gradient

Đây có phải mesh gradient WebGL thật không?

Không. Phiên bản này mô phỏng hiệu ứng mesh bằng nhiều lớp CSS radial gradient để output dễ copy và dùng lại.

Có thể dùng bao nhiêu điểm?

Editor hỗ trợ nhiều điểm và luôn giữ tối thiểu hai điểm.

Có thể dùng CSS trong React hoặc Tailwind không?

Có. Bạn có thể dùng qua style object, stylesheet, CSS module hoặc custom Tailwind utility.

FAQ

mesh gradient generator questions

?Why does a mesh gradient differ from a linear gradient?

A mesh blends several color regions rather than placing all stops along one straight line. Adjust the regions gradually to avoid muddy transitions.

?How can I keep text legible over a mesh?

Test the text over the lightest and darkest regions. Place a solid or translucent panel behind text when the mesh varies too much.