Soft gradients for Photoshop & Adobe Xd
Last Updated on August 23, 2026 by Editorial Team
Cool set of 8 soft gradients in .PSD and .XD format, perfect for overlays or even porting to css. Created by Felipe Copque
Look at the eight swatches and a pattern emerges quickly: each gradient moves diagonally between two closely related hues rather than jumping across the color wheel.
The blue-to-violet square, the lavender-to-blush pane, the emerald-into-lime block, and the teal-on-teal tile all sit on one side of that logic, while the bottom row swings into warmer territory with a coral-to-crimson red, a peach-to-butter orange, a pale double-yellow, and a candy pink fading into salmon.
Nothing here is harsh or high-contrast. Every transition is smooth and low-saturation enough to sit behind text or UI elements without fighting for attention, which is exactly what soft gradients are meant to do.
This kind of gradient pack earns its keep on backgrounds: hero sections, app splash screens, card headers, story templates, and social banners where you want depth and mood without a photo or illustration doing the work.
Because the color pairs are so close in value, they also work well as subtle overlays on top of photography, letting you tint an image toward a brand color while keeping the underlying photo readable.
The blue-violet and teal-cyan combinations lean calm and tech-forward, useful for SaaS dashboards, fintech apps, or portfolio sites that want a cool, modern feel.
The red, orange, and pink gradients push toward warmth and energy, better suited to lifestyle brands, food and beverage promos, event graphics, or anything that needs to feel inviting rather than corporate.
Using the Hex Values for CSS Gradients
Each swatch lists its two hex codes directly beneath the color block, which makes lifting them into a linear-gradient() rule in CSS straightforward.
Since the existing post already notes these port well to CSS, it’s worth planning your angle: a diagonal 135deg direction matches what’s shown in the previews, but a vertical or radial gradient can give the same colors a completely different feel for a hero banner versus a button or badge.
If you’re working in Photoshop or Adobe XD, you can also nudge the gradient stops slightly to make a background feel less flat, pulling one color further toward the edge of the frame so the transition reads more naturally at larger sizes.
Layering one of these gradients at reduced opacity over a photograph is an easy way to unify a set of images that were shot in different lighting, since the tint smooths out inconsistencies while keeping the palette on-brand.
Pairing suggestions are built into the set itself: the top row and bottom row read as two separate moods, so picking one gradient from each lets you build a cool-and-warm accent system for a single project, using the cooler tones for primary UI and the warmer ones for calls to action or highlights.
Because the palettes are soft rather than saturated, they also sit comfortably behind white or dark text alike, so testing both light and dark type over each gradient is worth doing before committing one to a final layout.
