CSS Gradient & Box Shadow Generator
Guide: px vs rem vs em: Which CSS Unit Should You Use?
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);Nothing you enter or choose here leaves your device. This tool runs in your browser.
How to use
- 1Choose Gradient or Box shadow.
- 2Adjust the controls and watch the live preview.
- 3Add color stops or shadow layers if you want more depth.
- 4Click Copy CSS and paste it into your stylesheet.
Frequently asked questions
Which gradient types are supported?
Linear, radial and conic, each with an optional repeating version. You can use between 2 and 6 color stops.
Can I stack several shadows?
Yes. Add up to five layers. Layered, softer shadows often look more natural than one heavy shadow.
What does spread do in a box shadow?
Spread grows or shrinks the shadow before it is blurred. A negative spread with a large blur gives a soft shadow that stays under the element.
Do these work in all browsers?
Gradients and box-shadow are supported in every modern browser, including mobile.
Read the guide
Learn how this works and how to get the most from it.
Web & SEO
px vs rem vs em: Which CSS Unit Should You Use?
The difference between px, rem and em in CSS, how to convert between them, and when each one is the right choice.
1 min read
Related tools
Color Converter & Contrast Checker
Convert HEX, RGB and HSL and check WCAG contrast ratios.
CSS Minifier & Beautifier
Compress CSS to save bytes, or format it so it is easy to read.
PX to REM Converter
Convert px to rem, em, pt and percent for any base font size.
QR Code Generator
QR codes for links, Wi-Fi, contacts, email, phone and text. PNG or SVG.