Subtle gradient strokes?

mvpcurtis · 25-11-2023, 10:34 AM

Hello everyone,

I'm wondering if someone can help me out with a little style that I've seen on this website. I'm trying to recreate something similar... I've looked within the code for the website but I can't seem to personally find out how it's done.

https://www.braydoncoyer.dev/

You'll see when you open the webpage, you'll be displayed with 2 subtle gradient effects... one on the header/nav bar and the other down on the footer. If someone can help me with how they've done that, that would be great!

parsifal · 04-12-2023, 07:35 PM

it's a transparent png image in footer with slight gradient color

mamyof · 10-12-2023, 06:27 PM

this code html

Code:
<div class="absolute overflow-hidden -top-32 md:-top-72 md:right-36"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27924%27%20height=%27718%27/%3e"></span><img alt="" src="/_next/static/media/rays.426980b9.png" decoding="async" data-nimg="intrinsic" class="absolute top-0 right-0" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"><noscript><img alt="" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="absolute top-0 right-0" src="/_next/static/media/rays.426980b9.png"/></noscript></span></div>

codyp0363 · 04-02-2024, 08:44 PM

't no way! ill deffs be checking this out. thank you

Subtle gradient strokes?

Submitted by mvpcurtis, 25-11-2023, 10:34 AM, Thread ID: 280283

RE: Subtle gradient strokes?

RE: Subtle gradient strokes?

RE: Subtle gradient strokes?