Font Blend

Lime Sherbet

linear

A fresh sherbet gradient from mint to yellow.

playfulfreshfriendly

Lime Sherbet for Playful Products

Lime Sherbet runs horizontally from mint into yellow, and it is one of the most energetic options in the catalog. It is a good match for kids, wellness, food, and cheerful SaaS products, and it works especially well as a broad accent band rather than a full-screen hero, because the two light colors are close in value and can look flat when stretched.

The gradient is light enough that dark text reads well on almost any part of it, so it is forgiving for marketing copy. To keep it from feeling washed out, pair it with a strong dark slate or forest green for text and icons, and let the mint-to-yellow sweep carry the mood. The 90 degree angle creates a clean left-to-right roll, which suits horizontal hero text and product carousels.

The horizontal sweep keeps both light stops side by side, so the gradient reads as a pastel band rather than a heroic backdrop. That makes it a good background for an illustration, a split banner, or a lightweight section separator. On product screenshots the surface can wash out small UI elements, so keep cards and buttons in solid white or dark slate. Set text in a deep green, which passes contrast on both stops and echoes the mint half, and the gradient instantly feels intentional instead of accidental.

Color stops
Each stop in the gradient, with hex value and position.

position 0%

position 100%

CSS code
Copy and paste into your stylesheet.
gradient.css
background: linear-gradient(90deg, #A7F3D0 0%, #FCD34D 100%);
tokens.css
:root {
  --gradient-lime-sherbet: linear-gradient(90deg, #A7F3D0 0%, #FCD34D 100%);
}

.gradient-lime-sherbet {
  background-image: var(--gradient-lime-sherbet);
}
lime-sherbet.svg
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600" viewBox="0 0 1200 600">
  <defs>
    <linearGradient id="g" x1="0.00%" y1="50.00%" x2="100.00%" y2="50.00%">
      <stop offset="0.000" stop-color="#A7F3D0" />
      <stop offset="1.000" stop-color="#FCD34D" />
    </linearGradient>
  </defs>
  <rect width="1200" height="600" fill="url(#g)" />
</svg>

Related Gradients