HTML and CSS project tutorial covering web development fundamentals. Learn to build interactive and responsive web pages.
The box-shadow property syntax: box-shadow: offset-x offset-y blur-radius spread-radius color inset;. offset-x and offset-y position the shadow — positive values move it right and down. blur-radius controls softness — higher values create softer edges. spread-radius expands or contracts the shadow size. color sets the shadow color using any CSS color value. Add inset for an inner shadow. Example: box-shadow: 0 4px 6px rgba(0,0,0,0.1); creates a soft outer shadow beneath an element. Multiple shadows are separated by commas: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1); creates layered depth.
Small shadow for cards: box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08). Medium shadow for dropdowns: box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06). Large shadow for modals: box-shadow: 0 10px 25px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.1). Hover lift effect: combine translateY transform with a larger shadow — transform: translateY(-4px); box-shadow: 0 12px 20px rgba(0,0,0,0.15). Colorful shadows use the element's color: box-shadow: 0 4px 14px rgba(79,70,229,0.4) for a purple-tinted glow matching a button's background.
Linear gradients transition colors along a straight line. Basic syntax: background: linear-gradient(direction, color1, color2, ...). Direction can be a keyword like to right, to bottom, or an angle like 45deg. Add color stops with percentages: linear-gradient(90deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%). Use transparent for fade effects: linear-gradient(to bottom, #4f46e5, transparent). Multiple gradients can be stacked on one element using comma separation. Gradients replace solid colors anywhere a background is accepted, enabling rich visual effects without image files.
Radial gradients radiate from a center point: background: radial-gradient(circle at center, #4f46e5, #1e3a8a). Control shape with circle or ellipse, and position with at top left or specific coordinates. Radial gradients are perfect for spotlight effects, sunburst patterns, and organic-looking backgrounds. Conic gradients rotate around a center point: background: conic-gradient(from 0deg, red, yellow, green, blue, red). Conic gradients create color wheels, pie charts, and rainbow effects. Both gradient types support multiple color stops and transparency for complex visual effects.
Subtle page backgrounds: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%). Button gradients: linear-gradient(135deg, #667eea 0%, #764ba2 100%). Card overlays: linear-gradient(to top, rgba(0,0,0,0.8), transparent) for text readability over images. Mesh gradients use multiple radial gradients: combine 2-3 overlapping radial gradients with different colors for a trendy, soft background effect. Glass morphism combines gradients with backdrop-filter blur: background: rgba(255,255,255,0.2); backdrop-filter: blur(10px). Use @property in modern CSS to animate gradient colors smoothly.
Gradients and shadows are rendered by the browser and may impact performance on low-end devices. Use will-change: transform only when animating shadow properties. Prefer opacity and transform transitions for shadow animations. Avoid excessive blur-radius values on shadows (over 20px) as they require more GPU computation. Gradients are generally performant but avoid stacking too many layers. Use CSS custom properties to maintain consistent shadow color schemes: --shadow-color: rgba(0,0,0,0.1). Test gradient backgrounds on various screen sizes and color settings to ensure readability and visual appeal.