# Lime green gradient: zesty codes with control

[Canonical HTML page](https://gradiently.design/guide/lime-gradient)

Lime is about as loud as green gets. Used with a plan it looks sharp and modern; used without one it looks like a highlighter. Here are the codes and the rules that keep it on your side.

## The short version

- A lime green gradient blends yellow leaning greens such as #bef264, #a3e635 and #84cc16, usually towards a darker olive, a near black or a neighbouring yellow or teal.
- Lime is very light for how saturated it is, so white text on it almost always fails contrast and a deep green or near black ink reads far better.
- Lime glows most on a near black ground, where a small amount of it carries a whole design.
- Blending lime straight into purple or pink tends to produce a grey middle, so keep those pairings in separate areas or pass through a bridge colour.
- Lime suits sport, music, tech launches and fresh food, and works best when it is the accent rather than the whole surface.

A **lime green gradient** blends the yellow side of green: pale citrus like `#d9f99d`, bright lime like `#a3e635` and deeper leaf tones like `#65a30d`, often fading into near black, olive, lemon or teal. The control comes from three choices: how much of the surface is lime, what ground it sits on, and what colour the words are. Get those right and lime looks deliberate and current. Below are lime gradient codes for each mood, the inks that read on them, and the pairings that stay clean.

## Why lime behaves differently from other greens

Lime sits between yellow and green on the colour wheel, and like yellow it is extremely light even at full saturation. That is the source of both its energy and its problems. It jumps off a dark screen, but it also washes out white type and tires the eye when it fills a large area. A forest or emerald green behaves more like blue; lime behaves more like a highlighter. The wider family is covered in [green gradients](https://gradiently.design/guide/green-gradient).

- Citrus mist: #ecfccb
- Pale lime: #d9f99d
- Fresh lime: #bef264
- Lime: #a3e635
- Leaf lime: #84cc16
- Deep lime: #65a30d
- Olive: #3f6212
- Lime ink: #1a2e05

A working lime ramp, from almost white to almost black. Gradients built from neighbours on this ramp never turn muddy.

## Lime green gradient codes on a dark ground

This is where lime earns its reputation. On a near black ground a small glow of lime reads as electric without being tiring, because the eye has somewhere dark to rest. Keep the lime to a corner or a band, and let the ground do most of the work.

- Lime light on black: `radial-gradient(circle at 80% 20%, #a3e635 0%, #3f6212 30%, #0b0f05 70%)`
- Night to lime: `linear-gradient(160deg, #0b0f05 0%, #1a2e05 45%, #84cc16 100%)`
- Stadium glow: `radial-gradient(ellipse at 50% 110%, #bef264 0%, #4d7c0f 35%, #0a0d06 75%)`
- Deep teal to lime: `linear-gradient(135deg, #0b1a14 0%, #134e4a 45%, #a3e635 100%)`

Four dark lime gradients. Each keeps the brightest lime in one region, so headlines can sit on the dark side.

Dark blends like these are where banding shows first, especially after a platform recompresses them. A fine layer of grain fixes it, and [dark gradient backgrounds](https://gradiently.design/guide/dark-gradient-backgrounds) has more grounds to try.

## Soft lime and citrus pastel gradients

Lime softened towards cream or mint loses its shout and becomes fresh, clean and a little botanical. These suit cafés, juice bars, skincare and spring campaigns. Warm one end slightly with a lemon or cream so the result feels sunlit rather than clinical.

- Lemon to lime cream: `linear-gradient(135deg, #fefce8 0%, #ecfccb 50%, #d9f99d 100%)`
- Lime to mint: `linear-gradient(180deg, #f7fee7 0%, #d1fae5 100%)`
- Citrus sun: `radial-gradient(circle at 30% 30%, #fef9c3 0%, #d9f99d 45%, #bef264 100%)`

Pale lime gradients for calm, fresh brands. Dark green ink reads beautifully on all three.

If you want the colour to lean further towards cool and clean, [mint gradients](https://gradiently.design/guide/mint-gradient) sit right next door.

## Colours that pair cleanly with lime

Lime blends cleanly with its neighbours: yellow on one side, green and teal on the other. Those transitions stay bright all the way through. The trouble starts with colours across the wheel. Purple and magenta are close to lime's complement, and a straight blend between them passes through a dull grey middle. [Muddy gradients](https://gradiently.design/guide/muddy-gradients) shows exactly why that happens.

### Avoid

- Lime blended straight into violet or magenta
- White text on bright lime
- Lime filling every pixel of a large poster
- Lime with red, which reads as a warning sign

### Do

- Lime into yellow, teal or deep olive
- Near black or deep green ink on lime
- Lime as a glow on a dark or cream ground
- Purple or pink placed beside lime, not blended into it

Lime, lemon, tangerine: `linear-gradient(120deg, #a3e635 0%, #facc15 50%, #f97316 100%)`

A full citrus run. Every step is a close neighbour of the last, so the middle stays bright instead of turning brown.

## Text colours that read on lime

Because lime is so light, the instinct to put white text on it is almost always wrong. Dark ink is the answer, ideally a very deep green so the whole design stays in one family. The ratios below are measured with the WCAG contrast formula; 4.5:1 is the usual minimum for body text. For more on the method, see [colour contrast and accessibility](https://gradiently.design/guide/color-contrast-accessibility).

| Background | Text | Contrast | Verdict |
| --- | --- | --- | --- |
| Lime `#a3e635` | White `#ffffff` | 1.5:1 | Fails, even for headlines |
| Lime `#a3e635` | Lime ink `#1a2e05` | 9.7:1 | Excellent |
| Leaf lime `#84cc16` | White `#ffffff` | 2.0:1 | Fails |
| Pale lime `#d9f99d` | Lime ink `#1a2e05` | 12.5:1 | Excellent |
| Olive `#3f6212` | White `#ffffff` | 7.1:1 | Good, use for the dark end |
| Near black `#0b0f05` | Lime `#a3e635` | 12.8:1 | Excellent, lime as the ink |

On a gradient, check the lightest point behind each line of text, not the average colour.

The last row is worth noticing: lime is a superb text colour on black. A lime headline over a near black gradient is one of the most legible pairings there is. [Text on a gradient](https://gradiently.design/guide/text-on-gradient) covers what to do when the words cross both ends of a blend.

A portrait product drop post announcing court shoes in lime, with light type on a dark green gradient lit by lime in one corner

Sportswear on a dark ground with a lime light. The words sit on the dark side.

A portrait post for a juice bar with dark green headline type on a pale lime and lemon gradient

A juice bar post on a soft citrus ground, with deep green ink.

## Lime gradient CSS for buttons and heroes

On the web, lime works brilliantly as a call to action on a dark page and poorly as a full page background. The snippet below gives a dark hero with a lime glow and a lime button with dark text. Interpolating in OKLCH keeps the blend bright where sRGB would dip; [OKLCH gradients in CSS](https://gradiently.design/guide/css-gradient-oklch) explains the syntax.

```css
.hero {
  min-height: 80vh;
  background-color: #0b0f05;
  background-image:
    radial-gradient(circle at 85% 15%, #a3e635 0%, transparent 40%),
    linear-gradient(160deg, #0b0f05 0%, #1a2e05 100%);
  color: #f7fee7;
}

.button {
  background: linear-gradient(135deg, #bef264, #84cc16);
  background: linear-gradient(135deg in oklch, #bef264, #84cc16);
  color: #1a2e05;
  border: 0;
  border-radius: 999px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
}
```

A dark hero with one lime light, and a lime button with deep green text. Browsers that don't support `in oklch` skip the second button background and keep the first.

## Where a lime green gradient works best

- **Sport and fitness:** match days, race entries, new kit. Lime on black reads as speed.
- **Music and nightlife:** club nights and release artwork, where it sits naturally beside [neon gradients](https://gradiently.design/guide/neon-gradients).
- **Tech and product launches:** a single lime accent makes a dark interface feel switched on.
- **Fresh food and drink:** juice, salads, cocktails and anything citrus, in the softer pastel range.
- **Spring campaigns:** pale lime and lemon say new season without the usual pastel pink.

Because lime is so recognisable, it is also easy to look like everyone else who reached for it this year. In Gradiently, every Mark is checked against every other and refused if it is too close, so a lime look you claim is one nobody else can export. Its legibility also adjusts behind each line, so lime never ends up under white words by accident.

## FAQ

### What is the hex code for lime green?

A widely used bright lime is `#a3e635`. Paler limes sit around `#d9f99d` and deeper ones around `#65a30d`. Pure web lime, `#00ff00`, is much harsher and rarely looks good in design.

### What colour text goes on a lime green gradient?

Use a very dark green such as `#1a2e05` or near black. White text on bright lime fails contrast badly, at about 1.5:1.

### What colours go with lime green in a gradient?

Yellow, lemon, teal, mint and deep olive blend cleanly with lime. Purple and pink look striking beside it but turn grey if you blend straight into them.

### How do I make a neon green gradient in CSS?

Put a lime glow on a near black ground, for example `radial-gradient(circle at 80% 20%, #a3e635 0%, #3f6212 30%, #0b0f05 70%)`. The dark ground is what makes lime look neon.

### Is lime green a good brand colour?

It can be, for energetic brands in sport, music, tech or fresh food. Use it as an accent on a dark or cream ground rather than the whole surface, and pair it with dark ink.