<div class="clayBox">
<h2>Claymorphism: Glassmorphic Edition</h2>
<p>Glayssmorphism? Classmorphism? It's like glassmorphism but more colorful and softer feeling. Idk I didn't make it up I'm just trying it out.</p>
<a href="#">Wow such button</a>
</div>
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
@c1:indigo;
@c2:spin(@c1,-90);
.clayBox {
width:360px;
height:auto;
background:linear-gradient(to bottom right, fade(white,33%), fade(white,20%), fade(white,20%), fade(white,40%));
border-radius:64px;
box-shadow:inset 1px 1px 0px fade(white,33%), inset 9px 9px 36px fade(lighten(@c1,30%),50%), inset -9px -9px 36px fade(lighten(@c1,15%),50%), 1px 1px 0px lighten(@c1,40%), 18px 18px 36px fade(darken(@c1,10%),50%);
padding:36px 36px;
backdrop-filter:blur(5px);
backdrop-filter:blur(5px);
position:relative;
}
h2 {
color:white;
text-transform:uppercase;
font-size:24px;
font-style:italic;
line-height:1
}
a {
float:right;
text-decoration:none;
background:@c2;
padding:12px 24px;
display:inline-block;
border-radius:36px;
color:white;
font-weight:500;
position:relative;
top:0;
box-shadow:inset 3px 3px 12px fade(lighten(@c2, 20%),40%), inset -3px -3px 12px fade(darken(@c2, 20%),30%), -1px -1px 0px fade(lighten(@c2, 40%),20%), 1px 1px 0px fade(lighten(@c2, 40%),40%), 3px 3px 18px fade(darken(@c2, 30%),20%);
transition:350ms box-shadow 0ms, 350ms background 250ms, 250ms top 250ms;
transition-timing-function:ease-in-out;
&:hover {
box-shadow:inset 3px 3px 12px fade(lighten(@c1, 20%),40%), inset -3px -3px 12px fade(darken(@c1, 20%),30%), -1px -1px 0px fade(lighten(@c1, 40%),20%), 1px 1px 0px fade(lighten(@c1, 40%),40%), 3px 3px 18px fade(darken(@c1, 30%),20%);
background:@c1;
top:3px
}
}
body {
background:linear-gradient(to bottom right, @c1, darken(@c1,20%));
height:98.65vh;
display:flex;
align-items:center;
justify-content:center;
font-family:system-ui, sans-serif;
font-size:18px;
line-height:1.45;
color:white;
text-shadow:1px 1px 0.1em fade(@c1,50%)
}
.floater {
width:170px;
height:170px;
animation:18s floater ease-in-out infinite;
opacity:.05;
content:'';
border-radius:48px;
position:fixed;
left:50%;
top:50%;
transform:translate(-175%,-150%) rotate(0deg);
z-index:-1;
background:linear-gradient(to bottom right, white, fade(white,0%));
@keyframes floater {
25% {
transform:translate(75%, -150%) rotate(180deg)
}
50% {
transform:translate(75%, 50%) rotate(360deg)
}
75% {
transform:translate(-175%, 50%) rotate(540deg)
}
100% {
transform:translate(-175%, -150%) rotate(720deg)
}
}
&:nth-of-type(2) {
animation: 26s floater ease-in-out infinite;
}
&:nth-of-type(3) {
animation: 34s floater ease-in-out infinite;
}
&:nth-of-type(4) {
animation: 42s floater ease-in-out infinite;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.