platform-admin/alva
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Seamless fade gradient

Browse Source 
Updated HeroSection gradient to blend exactly with background color for a seamless seam. Replaced previous gradient with a bottom fade using linear-gradient to match hsl(38 25% 96%), ensuring no visible line.

X-Lovable-Edit-ID: edt-d165db1f-31e0-4b92-a7f3-c9bbc6b5822e
This commit is contained in:
gpt-engineer-app[bot]
2026-01-28 00:33:40 +00:00
parent 7cc2dadef1 c352d9ade8
commit ab9a84bd24
1 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/HeroSection.tsx
+4 -2
View File
@@ -6,8 +6,10 @@ const HeroSection = () => {
<div className="pointer-events-none absolute inset-0 bg-cover bg-center opacity-40" style={{ <div className="pointer-events-none absolute inset-0 bg-cover bg-center opacity-40" style={{
backgroundImage: `url(${heroBakeryImage})` backgroundImage: `url(${heroBakeryImage})`
}} /> }} />
{/* Fade-out gradient at bottom */} {/* Fade-out gradient at bottom - exact background color for seamless blend */}
<div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent via-transparent via-70% to-background" /> <div className="pointer-events-none absolute inset-0" style={{
background: 'linear-gradient(to bottom, transparent 60%, hsl(38 25% 96%) 100%)'
}} />
{/* Keep contrast for text without washing out the image */} {/* Keep contrast for text without washing out the image */}
<div className="pointer-events-none absolute inset-0 bg-background/25" /> <div className="pointer-events-none absolute inset-0 bg-background/25" />