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, radial and conic gradients with as many stops as you need, then export to CSS, SwiftUI, Compose, React Native or Flutter.

Design gradients freeFree to export code for 6 platformsNo sign-upNo watermarkRuns in your browser

Presets

Type

Angle

160°

0° points up, increasing clockwise — the CSS convention.

Stop 1

Stop 2

100%

Get started

Stops: 2
Best text: Black
Worst contrast: 4.70:1

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 CSS, native code or a phone-sized image.
Color Picker from Image — Pull a palette out of any image, assign it to screen roles, and export it as tokens or native code.
Contrast Checker — Test any pair against WCAG 2 and the newer APCA method, with a colour-blind check and the nearest passing colours.

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.