Two buttons, same framework: one looks like a flagship product, the other like a 2010 webpage. The gap hides in a handful of parameters — gradient angle, shadow softness, corner radius. Here are the rules and numbers you can copy directly.
Gradients: Angle and Distance Do the Talking
- Use 135deg for buttons (top-left to bottom-right) — reads more modern than a flat 90deg fade.
- Keep the two stops close: 10-15% lightness difference within the same hue, e.g. #4F8CFF to #6FB1FF.
- Avoid saturated gradients for large backgrounds; low-saturation blue-grays and mauves almost never fail.
Shadows: Small Offset, Big Blur, Low Opacity
| Element | Offset | Blur | Color |
|---|---|---|---|
| Button | 0 2px | 6-8px | black at 10-15% |
| Card | 0 4px | 12-16px | black at 8-12% |
| Modal / popover | 0 8px | 24-32px | black at 12-18% |
Muddy shadows come from two mistakes: too much offset on both axes, or fully opaque black. Drop opacity below 15% and the shadow instantly looks clean.
Border Radius Scales With Size
- Buttons and inputs: 6-10px
- Cards and dialogs: 12-16px
- Hero images and covers: 16-24px
- Use at most two radius sizes per page for visual consistency
A Copy-Ready Workflow
- Pick your base color with the color picker (HEX/RGB/HSL)
- Dial in two stops and an angle in the gradient generator, copy the CSS
- Tune shadow and radius sliders until the preview looks right, copy again
Recommended Tools
Color Picker
Pick or paste a color, convert between HEX, RGB and HSL, with a shade palette.
CSS Gradient Generator
Preview and copy CSS linear or radial gradients from two colors.
Box Shadow Generator
Tune box-shadow with sliders and copy the CSS code.
Border Radius Generator
Adjust all four corners and copy the border-radius CSS.
Free online, images never leave your browser
FAQ
Can I combine gradient and shadow?
Yes — that combination is exactly where the premium feel comes from: gradient base + one light shadow + 8-12px radius. Just use one shadow layer; stacking several looks dirty.
Why does it look different on mobile?
Large shadows get clipped or feel heavy on small screens; responsive styles usually halve the blur. Preview your values at multiple widths before shipping.