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.
On this page
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.
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.
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 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.
If you want the colour to lean further towards cool and clean, mint gradients 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 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
linear-gradient(120deg, #a3e635 0%, #facc15 50%, #f97316 100%)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.
#a3e635Text
#ffffffContrast
Verdict
#a3e635Text
#1a2e05Contrast
Verdict
#84cc16Text
#ffffffContrast
Verdict
#d9f99dText
#1a2e05Contrast
Verdict
#3f6212Text
#ffffffContrast
Verdict
#0b0f05Text
#a3e635Contrast
Verdict
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 covers what to do when the words cross both ends of a blend.
Sportswear on a dark ground with a lime light. The words sit on the dark side.
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 explains the syntax.
.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;
}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.
- 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.
Questions people ask
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.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile