CSS Gradients

Delivered a session on CSS Gradients at the very first event of the JavaScript Gujarat community meetup held at AMA Ahmedabad.

Transcript

1. CSS Gradients Nidhi Dadiya - 20 Sept 2025 Beyond basics 1
2. Nidhi Dadiya Little about me
3. Nidhi Dadiya Let’s get started
4. Nidhi Dadiya What are CSS Gradients, why it matters?
5. Nidhi Dadiya • No extra image assets
6. Nidhi Dadiya • No extra image assets • Faster page load & easier maintenance
7. Nidhi Dadiya • No extra image assets • Faster page load & easier maintenance • Fully scalable to any screen size
8. Nidhi Dadiya • No extra image assets • Faster page load & easier maintenance • Fully scalable to any screen size • Can be animated or dynamically controlled via JS • Great for creative visual effects
9. Nidhi Dadiya CSS Gradients Fundamentals
10. Nidhi Dadiya • Linear
11. Nidhi Dadiya • Linear • Radial
12. Nidhi Dadiya • Linear • Radial • Conic/angular
13. Nidhi Dadiya • Linear • Radial • Conic/angular • Repeating • Multiple Repeating
14. Nidhi Dadiya • Linear • Syntax, directions, color stops, dominant color, hard lines, strips, stacking multiple gradients, blend mode css, repeating gradients, • Radial • Syntax, color stops, positioning of centre, sizing, stacking, repeating, • Conic/angular • Syntax, color stops, positioning of centre, repeating • Repeating • Multiple repeating gradients, plaid Demo
15. Nidhi Dadiya • https://projects.verou.me/ css3patterns/ • https://colorbeta.com/gradients Examples
16. Nidhi Dadiya Role of JS
17. Nidhi Dadiya • Theme switcher https:// codesandbox.io/p/devbox/theme- switcher-t7fdfq • Animated gradients background https://codesandbox.io/p/ sandbox/6w3md6 Examples
18. Nidhi Dadiya CSS gradients beyond simple backgrounds
19. Nidhi Dadiya • Painted eyes https://codepen.io/ nidhidadiya/pen/dPGbKKw • Sunrise, sunset https:// codepen.io/msaetre/pen/JjqPby Examples
20. Nidhi Dadiya Advanced Techniques
21. Nidhi Dadiya • Multiple gradient layers/stacking
22. Nidhi Dadiya • Multiple gradient layers/stacking • Controlling complex gradient stops precisely
23. Nidhi Dadiya • Multiple gradient layers/stacking • Controlling complex gradient stops precisely • Complex shapes in radial gradients (eyes example)
24. Nidhi Dadiya • Multiple gradient layers/stacking • Controlling complex gradient stops precisely • Complex shapes in radial gradients (eyes example) • Combining with CSS blend modes & masking • Animated motion effects
25. Nidhi Dadiya Performance Considerations
26. Nidhi Dadiya • Minimum color stops
27. Nidhi Dadiya • Minimum color stops • Prefer animating properties like background-position rather than color-stop changes • Use will-change or transform: translateZ(0) to enable GPU optimisation
28. Nidhi Dadiya • Minimum color stops • Prefer animating properties like background-position rather than color-stop changes • Use will-change or transform: translateZ(0) to enable GPU optimisation • Responsive simpli f ication
29. Nidhi Dadiya • Minimum color stops • Prefer animating properties like background-position rather than color-stop changes • Use will-change or transform: translateZ(0) to enable GPU optimisation • Responsive simpli f ication • Browser compatibility • Fallback strategies
30. Nidhi Dadiya Real use cases
31. Nidhi Dadiya Does it matter in the age of AI?
32. Nidhi Dadiya AI CSS Gradients Static images Dynamic (based on time of day, user input, state), can be controlled by JS Larger f ile size (slow page load) GPU accelerated (better performance) Need to regenerate image for slight change Better developer control & reusability Need multiple resolutions or cropping for responsiveness Fully responsive, Automatically adapts to any screen size
33. Nidhi Dadiya Above all, Foundational skills should never be neglected.
34. Nidhi Dadiya What next?
35. Nidhi Dadiya Special Thanks & Motivation
36. Nidhi Dadiya Let’s Connect
37. Nidhi Dadiya Feedback Caption
38. Nidhi Dadiya Thank you ! 🙏
39. References • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_images/ Using_CSS_gradients • https://web.dev/learn/css/gradients • https://www.conic.style/ • https://projects.verou.me/css3patterns/ • https://colorbeta.com/gradients • https://patrickbrosset.com/articles/2022-10-24-do-you-really-understand- CSS-radial-gradients/