How do I make text readable over a photo?

Add a scrim: a linear gradient from transparent at the top to a dark colour at the bottom, layered between the image and the text. It preserves most of the photo while lifting contrast where the text sits. Verify the result with a contrast checker.

Why does my gradient look muddy in the middle?

Because interpolating between two complementary colours passes through grey. Add a third stop at the midpoint using a hue that sits between the two on the colour wheel, or choose two neighbouring hues instead of opposites.

What causes banding in a CSS gradient?

Subtle gradients spread over a large area step visibly, especially on OLED phone displays at low brightness. Widen the colour distance, shorten the gradient's run, or overlay a very slight noise texture.

Is the generated CSS free to use commercially?

Yes. It is plain CSS you generated — there is no licence attached and no attribution required.

floow.design

Gradient Generator

Build linear and radial CSS gradients with as many stops as you need, and copy the code.

Design gradients freeSign up to copy the CSSNo usage limits

Type

Angle

160°

Stop 1

Stop 2

100%

background: linear-gradient(160deg, #6366f1 0%, #ec4899 100%);

Add colour stops, move them along the track, set the angle or radial shape, and copy production-ready CSS.

Gradients do a lot of work on phone screens — hero backgrounds, card overlays, the scrim behind white text on a photo — because they add depth without adding an image to download.

Linear and radial, and when each fits

A linear gradient runs along a straight axis you set with an angle; a radial one spreads outward from a point. On mobile, linear gradients carry almost all the everyday work — backgrounds, scrims, button fills — because they read as light falling across a surface. Radial gradients are best kept for deliberate focal effects, like a glow behind a hero element, where the centre needs to draw the eye.

Avoiding the grey dead zone

Interpolating between two saturated complementary colours drags the midpoint through grey, and the result looks muddy in the middle. The fix is a third stop: pick a colour that sits between them on the wheel rather than across from them, and place it at the midpoint. Two-stop gradients between neighbouring hues rarely have this problem at all.

Scrims: the most useful gradient you will write

White text over a photograph is unreadable until you put a gradient between them — transparent at the top, dark at the bottom, sitting over the image and under the text. It preserves most of the photo while guaranteeing the text passes contrast. Nearly every media-heavy app screen uses one.

How to use the gradient generator

Pick linear for backgrounds and scrims, or radial for a focal glow.
Set the angle — 180deg runs straight down, which is the usual direction for a scrim.
Adjust each colour stop's position, and add a third stop in the middle if the blend looks muddy.
Check the result at full width on a dark background as well as a light one before committing.
Copy the CSS and apply it as a background on your container.

Use it with

Mesh Gradient Generator — Generate soft multi-point mesh gradients and export them as an image.
Color Picker from Image — Drop in a screenshot or photo and pull out every colour in it, ready to paste into your app's theme.
Contrast Checker — Test any foreground and background pair against WCAG AA and AAA, at both body and large text sizes.

Frequently asked questions

How do I make text readable over a photo?: Add a scrim: a linear gradient from transparent at the top to a dark colour at the bottom, layered between the image and the text. It preserves most of the photo while lifting contrast where the text sits. Verify the result with a contrast checker.
Why does my gradient look muddy in the middle?: Because interpolating between two complementary colours passes through grey. Add a third stop at the midpoint using a hue that sits between the two on the colour wheel, or choose two neighbouring hues instead of opposites.
What causes banding in a CSS gradient?: Subtle gradients spread over a large area step visibly, especially on OLED phone displays at low brightness. Widen the colour distance, shorten the gradient's run, or overlay a very slight noise texture.
Is the generated CSS free to use commercially?: Yes. It is plain CSS you generated — there is no licence attached and no attribution required.