Copy and paste cool css mesh gradients // Built for Devs

#design #css

Copy-Paste Beautiful Mesh Gradients Instantly — Built for Devs

Building beautiful interfaces takes time, and sometimes, all you need is the right gradient.

Test it out!: http://cssmesh.com/

That’s why I created a simple tool for developers to instantly copy CSS mesh gradients. No signups. No fluff. Just clean, ready-to-use code.

You can:
— Preview the gradient live
— Choose from light, noisy, and dark styles
— Use it directly in your code or design

Mesh gradients can add depth and personality to your UI. But writing them by hand? A pain. This tool makes it effortless.

Whether you’re working on a landing page, a dashboard, or a portfolio — grab a mesh gradient and move on.

How to use it

Once you copy the code, drop it straight into your CSS like this:

.element {
  background-color: hsla(79, 98%, 66%, 1);
  background-image: 
    url("data:image/svg+xml,%3Csvg viewBox='0 0 1799 1799' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
    radial-gradient(circle at 94% 95%, hsla(170, 88%, 68%, 1) 3%, transparent 76%),
    radial-gradient(circle at 89% 34%, hsla(263, 96%, 51%, 1) 1%, transparent 86%),
    radial-gradient(circle at 86% 50%, hsla(318, 80%, 65%, 1) 7%, transparent 76%),
    radial-gradient(circle at 89% 79%, hsla(248, 76%, 53%, 1) 7%, transparent 87%),
    radial-gradient(circle at 15% 44%, hsla(4, 74%, 80%, 1) 15%, transparent 81%),
    radial-gradient(circle at 99% 20%, hsla(75, 88%, 92%, 1) 1%, transparent 68%);
  background-blend-mode: overlay, normal, normal, normal, normal, normal, normal;
}

You can apply it to body, div, or any element where you want a vibrant mesh backdrop.

That’s it. No dependencies, no frameworks,….just CSS.

DEV Community

Copy and paste cool css mesh gradients // Built for Devs

Top comments (0)