Skip to content

Instantly share code, notes, and snippets.

@mrenty
Created July 15, 2022 08:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mrenty/919c17f97f6ac62569b383e93e4f01d0 to your computer and use it in GitHub Desktop.
Save mrenty/919c17f97f6ac62569b383e93e4f01d0 to your computer and use it in GitHub Desktop.
Radial gradient
div {
background: none;
width: 200px;
height: 200px;
border-radius: 50%;
--size: 16px;
--gradient: radial-gradient(circle at top, #ffb199, #ff0844);
position: relative;
}
div::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: var(--size);
background: var(--gradient);
-webkit-mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment