مركز المعرفة والمفاهيم
استوديو التدرجات اللونية الانسيابية Mesh Gradient في CSS
استوديو التدرجات اللونية الانسيابية Mesh Gradient في CSS
تعمل هذه الأداة محلياً بالكامل داخل المتصفح (Client-Side). لا يتم إرسال أكوادك أو بياناتك الحساسة إلى أي خادم خارجي.
البنية الأساسية والصيغة الرياضية
Mesh = background-image: radial-gradient(at [X] [Y], [Color], transparent), ...
CSS mesh gradients are actually an optical illusion created by stacking multiple distinct `radial-gradient` layers on top of each other and allowing their translucent edges to bleed together.
أفضل الممارسات والإرشادات الأساسية
- Limit Color Nodes for Performance: Stacking 15 radial gradients on a single element forces the browser GPU to calculate massive matrix overlays on every frame. Keep it under 6 nodes for smooth 60fps scrolling on mobile.
- Use Analogous Colors: A mesh gradient looks terrible if you blend complementary colors (like pure Red and pure Green), resulting in a muddy brown center. Stick to adjacent colors on the color wheel (e.g., Blue, Purple, Pink).
- Animate with CSS Variables: You cannot cleanly transition the raw `background-image` property. To animate a mesh gradient, bind the X/Y coordinates to CSS custom properties (variables) and animate those using `@keyframes`.
الأسئلة الشائعة (FAQ)
Why is the gradient banding on my monitor?
Color banding occurs when monitors lack the bit depth to display the smooth transition between two similar colors. Adding a very subtle CSS noise overlay (grain) instantly fixes banding by dithering the pixels.
Can I save this as a PNG instead of CSS?
While pure CSS is infinitely scalable and uses zero bandwidth, if the gradient is too complex for mobile GPUs, it is highly recommended to screenshot the canvas and serve it as an optimized WEBP image.
Is a Mesh Gradient different from a Conic Gradient?
Yes. Conic gradients sweep colors around a central pivot point (like a pie chart), whereas mesh gradients use multiple overlapping radial bursts to create irregular, organic blobs.