Periwinkle CSS Gradient — Copy the Code

Lavender blue drifting into pale aqua, gentle and dreamy. Copy the Periwinkle gradient as CSS, a custom property, or a Tailwind theme block, and check its text contrast.

Periwinkle CSS

background: linear-gradient(90deg, rgba(127, 127, 213, 1) 0%, rgba(134, 168, 231, 1) 50%, rgba(145, 234, 228, 1) 100%);

Color stops

  • #7F7FD5 at 0% (100% opacity)
  • #86A8E7 at 50% (100% opacity)
  • #91EAE4 at 100% (100% opacity)

Edit this gradient · Browse all gradients · Check text over gradients