Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Gradient Art (One Div) - Tree
.christmas
$size: 200px;
$leaf-color: #7DAE41;
$trunk-color: #855726;
$bg: #0C1E42;
//------------------------------------------
html,body {
height: 100%;
background-color: #b33;
}
.christmas {
position: absolute;
top: 50%;
left: 50%;
margin-top: $size/-2;
margin-left: $size/-2;
//---------------------------------
width: $size;
height: $size;
position: relative;
border-radius: 50%;
background-color: $bg;
background-image:
// decoration
radial-gradient(circle at 50% 18%, yellow 3%, transparent 3.5%),
// top
linear-gradient(60deg, darken($leaf-color,0%) 8%, transparent 8.5%),
linear-gradient(-60deg, darken($leaf-color,1.5%) 8%, transparent 8.5%),
// middle
linear-gradient(60deg, darken($leaf-color,3%) 10%, transparent 10.5%),
linear-gradient(-60deg, darken($leaf-color,4.5%) 10%, transparent 10.5%),
// bottom
linear-gradient(60deg, darken($leaf-color,6%) 12%, transparent 12.5%),
linear-gradient(-60deg, darken($leaf-color,7.5%) 12%, transparent 12.5%),
// trunk
linear-gradient(80deg, darken($trunk-color,0%) 5%, transparent 5.5%),
linear-gradient(-80deg, darken($trunk-color,1.5%) 5%, transparent 5.5%);
background-position:
// decoration
0 0,
// leaves-top
$size/2 $size/2.5, $size/2 $size/2.5,
// leaves-middle
$size/2 $size/1.8, $size/2 $size/1.8,
// leaves-bottom
$size/2 $size/1.4, $size/2 $size/1.4,
// trunk
$size/2 $size/1.25, $size/2 $size/1.25;
// snow -----
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
transform: rotate(-15deg);
background-image:
radial-gradient(circle at 30% 30%, #fff 1.5%, transparent 2.5%),
radial-gradient(circle at 80% 70%, #fff 1.5%, transparent 2.5%),
radial-gradient(circle at 30% 50%, #fff 1%, transparent 2%),
radial-gradient(circle at 70% 85%, #fff 1%, transparent 2%);
background-size: 100% 100%, 100% 100%, 50% 100%, 50% 50%;
background-position: 0 0, 0 0, 0 0, 0 0;
animation: snow 6s linear infinite forwards;
@keyframes snow {
100% {
background-position: 0px $size, 0 $size, 0px $size, 0px $size;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment