Perfect choice, Sansu! Gradient frame modern aur stylish lagta hai — dark mode me to aur bhi cool dikhta hai.
Neeche ek responsive grid layout ka code de raha hoon jisme gradient border frame apply hai. Isko tum Blogger ke HTML me easily paste kar sakte ho.
✅ Gradient Frame Grid Box (Blogger Compatible Code)
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}
.grid-item {
background-color: #1e1e1e;
color: white;
padding: 20px;
border-radius: 15px;
position: relative;
z-index: 1;
border: 3px solid transparent;
background-clip: padding-box;
overflow: hidden;
}
.grid-item::before {
content: "";
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
background: linear-gradient(135deg, #ff00cc, #3333ff);
z-index: -1;
border-radius: 18px;
}
</style>
<div class="grid-container">
<div class="grid-item">
<h3>Box 1</h3>
<p>Yeh ek stylish gradient frame hai.</p>
</div>
<div class="grid-item">
<h3>Box 2</h3>
<p>Dark mode me bhi yeh classy lagega.</p>
</div>
<div class="grid-item">
<h3>Box 3</h3>
<p>Add your content here.</p>
</div>
</div>
Customize Kar Sakte Ho:
- Gradient colors change karne ke liye
linear-gradient(...)
edit karo. grid-template-columns
adjust karke box size control karo.border-radius
aurpadding
se curve aur spacing control karo.
Agar tum chaho to main isme:
- Hover animation,
- Icon support,
- Ya image + text layout bhi add kar sakta hoon.
Batao, aur kya design chahiye?