CSS Generator
Gradients, shadows and corners, adjusted visually
Options
Result
background: linear-gradient(135deg, #1fa89c 0%, #7c3aed 100%);
Paste the copied declaration straight into your CSS selector.
Shadow and gradient syntax has four or five numbers whose effect nobody can picture from the code. Drag the sliders until the preview looks right, then take the rule.
How to use
- 1 Choose what you want to build.
- 2 Adjust the sliders and colours while watching the preview.
- 3 Copy the generated CSS.
- 4 Paste it inside your selector.
Frequently asked questions
What do the box-shadow values mean?
Horizontal offset, vertical offset, blur, spread, colour. Blur softens the edge; spread grows or shrinks the whole shadow before blurring. Positive vertical offset with a small blur reads as a light source above.
How do I make a shadow look natural?
Keep the horizontal offset near zero, use a small positive vertical offset, and a blur two to three times that offset. Use a low-opacity black rather than grey — grey shadows look flat over coloured backgrounds.
What does inset do?
Draws the shadow inside the element instead of outside, which makes it look pressed in rather than raised. Useful for input fields and toggled buttons.