CSS Box Shadow Generator
Design layered box shadows with sliders and copy the CSS.
CSS Gradient Generator
Pick colours, drag the stops and copy ready CSS.
Your files stay with you. Your files never leave your browser. This tool runs on your device: nothing is uploaded to our servers, so there is nothing for us to store or see.
How to use it
- Choose a type and start from a preset if you like.
- Set the angle and adjust the colour stops.
- Copy the CSS into your stylesheet.
Questions people ask
How do I make a gradient background in CSS?
Copy the generated line, for example background: linear-gradient(135deg, #FF6A00 0%, #FF2D6F 100%);, into the rule of the element.
What is the difference between the three types?
Linear changes colour along a straight line at an angle, radial spreads from a centre point and conic sweeps around a centre like a pie chart.
How many colours can I use?
Two to five stops here. CSS itself allows many more, so you can add stops by hand in the copied code.
Do all browsers support it?
Linear and radial gradients work everywhere. Conic gradients work in all current browsers.
Want this inside your own account?
Marketiism keeps your invoice numbers, GST reports, UPI payment links and WhatsApp reminders in one place. Leave your details and we'll call to set it up for your business, or start the trial yourself.
More Developer tools
CSS Border Radius Generator
Round the corners of a box with sliders and copy the border-radius CSS.
Colour Converter
Convert colours between HEX, RGB and HSL, and check contrast against white and black.
JSON Formatter
Format, validate and minify JSON, and see exactly which line has a mistake.
JSON to CSV
Turn a JSON list of records into CSV for Excel or Google Sheets.
CSV to JSON
Convert CSV rows into a JSON list, with numbers and true/false detected.