Skip to content

Instantly share code, notes, and snippets.

@metodribic

metodribic/fullbleed.css

Last active June 20, 2022 07:00
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 metodribic/25215d7af7a26460ae648f6902c17721 to your computer and use it in GitHub Desktop.
Save metodribic/25215d7af7a26460ae648f6902c17721 to your computer and use it in GitHub Desktop.
Download ZIP
Full bleed box-shadow + clip-path technique
Raw
fullbleed.css
.full-bleed-background {
--c: red;
background: var(--c);
/* Stretched box shadow */
box-shadow: 0 0 0 100vmax var(--c);
/* Clip only the top and the bottom */
clip-path: inset(0 -100vmax);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment