CSS gradient maker

Build a background in seconds.

Choose two colours and a direction, then copy the CSS.

Create a digital gradient

Pick two HEX colours and a direction, preview the blend and copy its CSS. This is a screen design tool; the gradient does not translate directly into a single wall paint shade.

01 / COLOURPreview & paintPick a shade and estimate litres 02 / FLOORTiles & flooringFind boxes and material cost 03 / SPACEFurniture fitCheck dimensions both ways 04 / LIGHTLighting plannerEstimate fixture count 05 / MONEYRoom budgetCollect quotes in one place 06 / YOUR PLANSee full room planSave and share your brief

Design extras for creators

STEP 01 / CHOOSE YOUR ROOM

Start with your room

Select the room and the feeling you want. Your suggested colours update instantly.

Room to paintHow much daylight?Colour moodPainting allowed?

Your choices stay in this browser. Clearing browser data removes saved plans and palettes.

COLOUR IDEAS LIVING ROOM

A calm place to land

Before you buy

STEP 02 / PREVIEW YOUR WALL

See the colour on a sample room

Choose a colour below. The sample room changes instantly, so you can compare before you buy.

VISUAL GUIDE

Wall colour

Illustrative sample room, not a photo of your own space. Actual paint, wall finish and lighting will differ; test a physical sample.

STEP 03 / ESTIMATE THE PAINT

Plan the quantity and cost

Enter your room size in feet. Add your local paint and painter rates to see a rough budget.

Walls only · estimate

Room 1 · measurements

Room length ftRoom width ftWall height ft

Doors + windows sq ftNumber of coatsCoverage per litre sq ft / coat

Paint price ₹ / litrePainter rate ₹ / sq ft

Example prices only: ₹350/L and ₹12/sq ft are sample inputs, not current market prices. Replace with your local quote. 100 sq ft per litre per coat is an editable example. Use the coverage on your paint tin. Painter rate is applied once to wall area; confirm what your quote includes.

Include ceiling (length × width for each room) Include primer Include wall putty

Primer and putty coverage and prices are editable examples. Check the actual product pack and required coats.

YOUR PAINT ESTIMATE—litres including 10% extra, rounded up to whole litres

Estimated total: Enter rates
Rooms included: 1
Illustrative range (90–120 sq ft/L/coat): —
Suggested tins: —
Paint left after estimate: —
Ceiling area: Off
Primer: Off
Wall putty: Off
Wall area after openings: —
Area across all coats: —
Paint cost: Enter price
Painter cost: Enter rate

Range is illustrative; brand, product and surface can differ greatly. Excludes repairs, taxes and other materials. Ceiling, primer and putty are included only when selected.

How we calculate

Wall area = 2 × (length + width) × height − doors/windows, summed across rooms. Area across coats = painted area × coats. Paint litres = area across coats ÷ your coverage, then 10% extra and rounded up. We use whole litres to suggest common 1 L, 4 L, 10 L and 20 L tins. Ceiling is length × width per room when selected. Primer and putty use their own editable coverage and prices.

This is a planning estimate. Ceiling, primer and putty are off by default. Repairs, tax, delivery, surface preparation and extra materials are excluded.

Colour code is a digital HEX reference, not a paint brand shade code. Match a physical swatch before buying.

04 / BLEND

Gradient maker

Blend two colours into a background you can use immediately.

Start colour End colour Direction

YOUR GRADIENTMake something
remarkable.

CSS gradient maker

Create a digital gradient

Start with your room

A calm place to land

See the colour on a sample room

Plan the quantity and cost

Room 1 · measurements

How we calculate

Tiles & flooring calculator

Will the furniture fit?

Plan your room lighting

Plan the full room budget

One room, one clear brief

Palette studio

Saved palettes 0

Colour harmony

Contrast checker

Gradient maker