Pastel Pink UI
#fff1f2 · #f9a8d4 · #fb7185
linear-gradient(135deg, #fff1f2 8%, #f9a8d4 50%, #fb7185 92%)
Gradient gallery
Pink Gradient: CSS gradients, backgrounds, and downloadable images
Pink gradients can be soft and airy or bold and playful. Pair pale pink with peach for gentle backgrounds, or combine rose, fuchsia, and violet for a more expressive product surface.
Ready-to-use pink gradient examples
Use pink gradients for creator tools, beauty brands, lifestyle pages, soft onboarding screens, and editorial graphics. Add a dark text layer or white overlay when the gradient is very bright.
Rose Creator
#f472b6 · #ec4899 · #8b5cf6
linear-gradient(120deg, #f472b6 14%, #ec4899 50%, #8b5cf6 86%)
Peach Blush
#ffedd5 · #f9a8d4 · #fb7185
linear-gradient(130deg, #ffedd5 8%, #f9a8d4 50%, #fb7185 92%)
Fuchsia Pop
#831843 · #db2777 · #f0abfc
linear-gradient(145deg, #831843 11%, #db2777 50%, #f0abfc 89%)
Soft Editorial
#fdf2f8 · #fbcfe8 · #c4b5fd
linear-gradient(132deg, #fdf2f8 8%, #fbcfe8 50%, #c4b5fd 92%)
Pink Sunset
#fb7185 · #f97316 · #fde68a
linear-gradient(118deg, #fb7185 15%, #f97316 50%, #fde68a 85%)
Dark Rose App
#14040a · #be185d · #f9a8d4
linear-gradient(140deg, #14040a 8%, #be185d 50%, #f9a8d4 92%)
Candy Glass
#f0abfc · #f9a8d4 · #bae6fd
linear-gradient(125deg, #f0abfc 11%, #f9a8d4 50%, #bae6fd 89%)
Rose Bloom Radial
#831843 · #db2777 · #f0abfc
radial-gradient(circle at 84% 18%, #f0abfc 0%, transparent 44%), radial-gradient(circle at 50% 46%, #db2777 0%, transparent 44%), radial-gradient(circle at 18% 76%, #831843 0%, transparent 44%), linear-gradient(135deg, #831843, #07070d)
Candy Halo Radial
#fff1f2 · #f9a8d4 · #bae6fd
radial-gradient(circle at 22% 22%, #fff1f2 0%, transparent 44%), radial-gradient(circle at 56% 50%, #f9a8d4 0%, transparent 44%), radial-gradient(circle at 82% 76%, #bae6fd 0%, transparent 44%), linear-gradient(135deg, #fff1f2, #07070d)