Skip to content

Instantly share code, notes, and snippets.

@thevangelist

thevangelist/border-bottom linear gradient in CSS

Last active February 28, 2023 09:51
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 thevangelist/e414409396d38b17ef34799edfce8df6 to your computer and use it in GitHub Desktop.
Save thevangelist/e414409396d38b17ef34799edfce8df6 to your computer and use it in GitHub Desktop.
Download ZIP
Gradient bottom border to div in CSS
Raw
border-bottom linear gradient in CSS
/** CSS **/
.border-bottom {
border-bottom: 1px solid transparent;
border-image: linear-gradient(0.25turn, transparent, black, transparent);
border-image-slice: 1;
width: 100%;
}
/** HTML **/
<div class="d-flex vh-100">
<div class="m-auto">
<div class="border-bottom">
<h2>This is also that I like</h2>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment