Skip to content

Instantly share code, notes, and snippets.

@masoudei

masoudei/index.html

Created May 28, 2022 04:25
Show Gist options
  • Save masoudei/3d6f77c5e7369aa8287c24f8b156ef25 to your computer and use it in GitHub Desktop.
Save masoudei/3d6f77c5e7369aa8287c24f8b156ef25 to your computer and use it in GitHub Desktop.
Download ZIP
Todrick Triangle - Neon Glow Effect Using CSS Drop Shadows and Clip Paths
Raw
index.html
<div class="shadow">
<div class="triangle-wrapper">
<div class="triangle">
<p>Todrick</p>
</div>
</div>
</div>
Raw
style.scss
body {
display: flex;
justify-content: center;
align-items: center;
background-color: hsl(210, 50%, 14%);
height: 100vh
}
$vw-width: 30vw;
$vw-height: calc(#{$vw-width} / (1/ 1));
$tod-tri: #ff00ff;
$gold-tri: #fccc47;
.shadow {
filter: drop-shadow(10px 10px 200px $tod-tri) drop-shadow(-10px -10px 50px $tod-tri);
}
.triangle-wrapper {
width: $vw-width;
height: $vw-height;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
background-color: $tod-tri;
display: flex;
justify-content: center;
align-items: center;
}
.triangle {
width: calc(#{$vw-width} - 30px);
height: calc(#{$vw-width} - 30px);
background-color: hsl(210, 50%, 14%);
//background-color: $gold-tri;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
margin-top: 10px;
filter: blur(115px) drop-shadow(-10px -10px 75px $tod-tri);
p {
color: #FFF;
}
}
Raw
todrick-triangle-neon-glow-effect-using-css-drop-shadows-and-clip-paths.markdown

Todrick Triangle - Neon Glow Effect Using CSS Drop Shadows and Clip Paths

CSS neon glow effect using drop shadows and clip-path.

A Pen by Dave Brogan on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment