Library Backgrounds

Cinematic Gradient

Wide cinematic gradient wash suitable as a hero atmosphere under type.

Wide washWide cinematic gradient wash suitable as a hero atmosphere under type.Use this asset as a visual and interaction brief. Copy the prompt into your AI coding tool, then adapt layout, brand voice and motion intensity to your product.

Back to Library

Then paste it into your favorite AI coding tool.

Details

Type: Backgrounds
Category: Luxury
Style: Cinematic
Tech stack: CSS
Animation: Gradient
Difficulty: Beginner
License: Personal
Access: Free
Creator: Alex Morgan
Views: 222

Gradient
CSS

Copy. Paste. Create.

This prompt is engineered to communicate visual direction, layout, interaction, animation and technical requirements.

Create a cinematic gradient wash (deep charcoal to soft graphite with a cool highlight stop). Static by default; optional 40s drift. Provide light and dark variants. No purple default.

Code

<!-- HTML -->
<div class="bg" id="bg"></div>

/* CSS */
.bg{width:100%;height:100%;background:linear-gradient(125deg,hsl(91 85% 62%),hsl(182 70% 55%),#050505 70%);background-size:200% 200%;animation:flow 8s ease-in-out infinite}@keyframes flow{50%{background-position:100% 50%}}

// JS