Gradient Background
linear-gradient() se smooth multi-color background banao without image asset.
Working code
<section class="hero-box">
<h2>Learn. Practice. Build.</h2>
<p>Start your coding journey.</p>
</section>
<style>
.hero-box {
padding: 48px 24px;
color: white;
border-radius: 18px;
background: linear-gradient(135deg, #10233f, #0b73ce);
}
</style>Preview
Learn. Practice. Build.
Start your coding journey.
How it works
linear-gradient() CSS generated image hai, external image file nahi.
135deg gradient direction set karta hai aur following color values gradient stops define karte hain.
Try Yourself
<section class="hero-box">
<h2>Learn. Practice. Build.</h2>
<p>Start your coding journey.</p>
</section>
<style>
.hero-box {
padding: 56px 28px;
color: white;
background: linear-gradient(90deg, #222, #555);
border-radius: 24px;
}
</style>