Invent responsive digital materials from light, roughness, refraction, metallic response, spectral film and grain. Test them under a movable studio light, mutate new specimens, and export the layered CSS recipe.
.material {
--light-x: 34%;
--light-y: 24%;
--material-base: #071f18;
--material-accent: #64f5ad;
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: 28px;
border: 1px solid rgba(255,255,255,0.41);
background:
radial-gradient(circle at var(--light-x) var(--light-y), rgba(255,255,255,0.77) 0%, rgba(255,255,255,0.16) 15%, transparent 38%),
linear-gradient(128deg, rgba(100, 245, 173, 0.95) 0%, rgba(7, 31, 24, 0.92) 34%, rgba(100, 245, 173, 0.48) 57%, rgba(7, 31, 24, 0.96) 100%);
box-shadow: 0 31px 77px rgba(0,0,0,0.36), 0 0 26px rgba(100, 245, 173, 0.128), inset 0 1px 1px rgba(255,255,255,0.48), inset 0 -6px 22px rgba(7, 31, 24, 0.42);
backdrop-filter: blur(2.0px) saturate(1.42);
}
.material::before {
content: "";
position: absolute;
inset: -35%;
z-index: -1;
opacity: 0.58;
background: conic-gradient(from 30deg, transparent, #ff4fd8, #5de7ff, #8dff7a, #ffe66d, transparent 72%);
mix-blend-mode: color-dodge;
transform: translate(calc((var(--light-x) - 50%) * .25), calc((var(--light-y) - 50%) * .25));
filter: blur(11px);
}
.material::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.02;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
mix-blend-mode: soft-light;
}