175px
10%
2px
20px
Light properties
237°
70
30
For my military knowledge, though I'm plucky and adventury,
Has only been brought down to the beginning of the century;
But still, in matters vegetable, animal, and mineral,
I am the very model of a modern Major-General.
Has only been brought down to the beginning of the century;
But still, in matters vegetable, animal, and mineral,
I am the very model of a modern Major-General.
.parent {
background-color: #8a6bc0;
}
.my-element {
/*===== Configurable Variables =====*/
/*======= Only these change! =======*/
--color: #41b011;
--radius: 10%;
--elevation: 20px;
--bevel: 2px;
--angle: 237deg;
--intensity: 70;
--diffusion: 30;
/*======= Computed Variables =======*/
--sin: calc(sin(var(--angle)));
--cos: calc(cos(var(--angle)));
--x-displacement: calc(-1 * var(--cos) * (var(--elevation) + 1px));
--y-displacement: calc(-1 * var(--sin) * (var(--elevation) + 1px));
--edge-opacity: calc(var(--intensity) * 0.006 - var(--diffusion) * 0.002);
--edge-blur: calc(var(--bevel) * 1.5);
--surface-contrast: calc(var(--intensity) * 0.01 - var(--diffusion) * 0.005);
/*======= Computed Properties =======*/
border-radius: var(--radius);
box-shadow: var(--x-displacement) var(--y-displacement) calc(var(--diffusion) * 0.3px + (var(--elevation))) calc(var(--elevation) / 2) rgba(0, 0, 0, calc(var(--intensity) * 0.006)),
0px 0px calc(var(--diffusion) * 1.4px) rgba(255, 255, 255, calc(var(--intensity) * 0.004)),
inset calc(var(--bevel) * -1) 0 var(--edge-blur) hsla(100, 0%, calc((var(--cos) + 1) * 50%), var(--edge-opacity)),
inset 0 var(--bevel) var(--edge-blur) hsla(100, 0%, calc((-1 * var(--sin) + 1) * 50%), var(--edge-opacity)),
inset var(--bevel) 0 var(--edge-blur) hsla(100, 0%, calc((-1 * var(--cos) + 1) * 50%), var(--edge-opacity)),
inset 0 calc(var(--bevel) * -1) var(--edge-blur) hsla(100, 0%, calc((var(--sin) + 1) * 50%), var(--edge-opacity));
background: linear-gradient(
calc(var(--angle) + 90deg),
rgba(0, 0, 0, var(--surface-contrast)),
rgba(255, 255, 255, var(--surface-contrast))
),
var(--color);
/*======== Static Properties ========*/
background-blend-mode: soft-light;
}
/*==== Made using xmorphic.dev ====*/