CSS Gradient Syntax
The linear-gradient() function creates a gradient along a straight line defined by an angle. Use radial-gradient() for gradients that radiate from a center point as a circle or ellipse. Both accept color stops with optional position percentages.
Box Shadow Properties Explained
The box-shadow property takes X offset, Y offset, blur radius, spread radius, and color. Positive X/Y moves the shadow right/down. Blur softens edges while spread expands or shrinks the shadow. Add inset for inner shadows. Multiple shadows are comma-separated.
Border Radius Tricks
Set border-radius: 50% on a square element for a perfect circle. Use a large value like 9999px on a rectangle for a pill shape. Assign different values to each corner for asymmetric designs such as organic blob shapes.
Frequently Asked Questions
Can I use multiple gradients on one element?
Yes. Stack multiple gradient functions separated by commas in the background property. The first gradient listed renders on top.
How do I add box shadow to text?
Use the text-shadow property instead. It accepts similar offset, blur, and color values but does not support spread or inset.
What units work for border-radius?
Any CSS length unit works: px, em, rem, and percentages. Using 50% on a square creates a circle. Percentages scale with the element dimensions.