I have an unusual question regarding adding a gradient to both SVG and HTML shapes using one styling. My problem is that if I create an SVG shape and a div shape, and I add a gradient separately, then we can see these two shapes. However, I want the viewers to see this as one shape, even though we know it is two.
So, let's get directly to my problem. I want to create a wave using SVG path shapes, and I'm using HTML and CSS (if we need JavaScript, there is no problem). The div container takes a random height because of the content. So, after I put that wave at the bottom of that container (container shape) if I put one color, there is no problem, right? But when I put a gradient, we can see these are two shapes, and the UI looks bad. the gradient starts from left to right, so the div container gradient is also left to right, and both show gradient but in different positions. So, we can see that these are two shapes. I don't want to create one SVG path because different articles have varying heights. Finally, I want my container (div shape) and that wave SVG path shape to take one styling gradient. That's it.
Here is a simple code for this question:
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
article {
background: linear-gradient(
45deg,
rgb(109, 162, 248),
rgb(52, 82, 250)
);
margin: 0;
padding: 1rem 2rem;
color: white;
position: relative;
}
h1 {
text-align: center;
}
#arrow {
position: absolute;
bottom: 0;
right: 5%;
transform: rotate(180deg);
}<article>
<h1>Intestaller Movie Review</h1>
<p>
"Intestaller" is a science fiction film directed by Christopher Nolan.
The film stars Matthew McConaughey as Cooper, a former NASA pilot who is
tasked with leading a team of scientists on a mission to find a new home
for humanity. The movie is set in a dystopian future where Earth's
resources are rapidly depleting, and mankind's survival is at stake.
</p>
<p>
The plot of the movie is complex and thought-provoking, exploring themes
such as time travel, black holes, and the nature of human existence. The
film's visual effects are stunning, with breathtaking scenes of space
travel and the cosmic wonders of the universe. The acting performances
are also top-notch, with McConaughey delivering a powerful and emotional
performance as the film's protagonist.
</p>
<p>
While the movie's plot can be challenging to follow at times, it is
ultimately a rewarding and satisfying viewing experience. "Intestaller"
is a film that encourages viewers to contemplate the big questions about
our place in the universe and the choices we make as a species. Overall,
it is a must-see for any science fiction fan or anyone interested in
exploring the mysteries of the cosmos.
</p>
<p>
In conclusion, "Intestaller" is a visually stunning and intellectually
stimulating film that will leave you with plenty to ponder long after
the credits roll.
</p>
<svg
id="arrow"
width="100px"
height="100px"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="Arrow / Arrow_Up_LG">
<path
id="Vector"
d="M12 3L7 8M12 3L17 8M12 3V21"
stroke="red"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</g>
</svg>
</article>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<defs>
<linearGradient id="grad_1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop
offset="0%"
style="stop-color: rgb(109, 162, 248); stop-opacity: 1"
/>
<stop
offset="100%"
style="stop-color: rgb(52, 82, 250); stop-opacity: 1"
/>
</linearGradient>
</defs>
<path
fill="url(#grad_1)"
fill-opacity="1"
d="M0,160L48,170.7C96,181,192,203,288,197.3C384,192,480,160,576,128C672,96,768,64,864,85.3C960,107,1056,181,1152,202.7C1248,224,1344,192,1392,176L1440,160L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"
></path>
</svg>As you can see, we can see two different gradients, but I need one gradient for both shapes. I've tried ChatGPT, YouTube, and many more, but I can't find the solution to this problem.
