Background Transformer
← Back to Portfolio
Documentation
Preview
See your gradient in action
📚 Site Presets
🧭 Gradient Direction
Angle
↓ Top to Bottom
↑ Bottom to Top
↘ Diagonal
→ Left to Right
🎨 Color Stops
Start (0%)
Opacity
Middle
Position
Opacity
End (100%)
Opacity
✨ Effects
New
Background Blur
Adds dreamy depth effect
Blur Amount
Film Grain
Cinematic texture overlay
Grain Intensity
💻 Generated CSS
CSS Property
💾 Save Custom Preset
Save
💡 Tip:
This tool demonstrates the background theming system used throughout the portfolio. All sections use the same background image with different gradient overlays to create unique moods while maintaining visual cohesion.