Skip to content

Instantly share code, notes, and snippets.

@mateuszkocz

mateuszkocz/3d-ball.css

Last active January 22, 2022 23:32
Show Gist options
  • Save mateuszkocz/4513093 to your computer and use it in GitHub Desktop.
Save mateuszkocz/4513093 to your computer and use it in GitHub Desktop.
Download ZIP
3D ball with CSS radial-gradient
Raw
3d-ball.css
#ball {
width: 300px;
height: 300px; border-radius: 150px;
background-color: blue;
background-image: radial-gradient(circle 400px at 0 0, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,.8)), radial-gradient(circle 180px at 90px 80px, rgba(255,255,255,.7), rgba(0,0,0,0));
background-repeat: no-repeat, no-repeat;
position:relative;
}
#ball:after {
content: "";
z-index: -1;
top: 220px; left: 150px;
position: absolute;
background-color: black;
border-radius: 280px 60px;
width: 150px;
height: 80px;
box-shadow: 1px 0 1px black;
opacity: .8;
}
Raw
dabblet.html
<div id="ball"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment