Category:

Tutorial

Duration: 46:00

4,731 views

229

Are gradients dead in web design? Far from it! Gradients are being used more and more to add color, depth, and visual interest to websites in 2023. We’re going to cover the basics of gradients, how we can create them with CSS, and some advanced techniques to round things off.
► Download unlimited photos, fonts, and templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_ByV69RZ6wtM&utm_medium=referral&utm_source=youtube.com&utm_content=description

Assets Used in This Video:

• Adobe Color: https://color.adobe.com/create/color-wheel
• Tint and Shade Generator: https://maketintsandshades.com/
• Shadowlord Tints and Shades Generator Tool: https://noeldelgado.github.io/shadowlord/#2d63a5
• Color Contrast Checker - Coolors: https://coolors.co/contrast-checker/202430-20c7ac
• Web Content Accessibility Guidelines: https://en.wikipedia.org/wiki/Web_Content_Accessibility_Guidelines
• Power Pay Logo Template: https://elements.envato.com/power-pay-app-thunder-letter-p-logo-template-9ES638U?utm_campaign=yt_tutsplus_ByV69RZ6wtM&utm_medium=referral&utm_source=youtube.com&utm_content=description
• Photo by Alireza Dolati on Unsplash: https://unsplash.com/photos/OVS3rqXq9gg
• CSS mesh gradients generator: Mesher Tool by CSS Hero: https://csshero.org/mesher/
• Handpicked beautiful color gradients: https://uigradients.com/#Cinnamint

00:00 Introduction
02:08 Understanding gradients
15:08 Creating gradients in CSS
29:31 Advanced gradient techniques

Read more CSS tutorials on Envato Tuts+: https://webdesign.tutsplus.com/categories/css?utm_campaign=yt_tutsplus_ByV69RZ6wtM&utm_medium=referral&utm_source=youtube.com&utm_content=description

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt_tutsplus_ByV69RZ6wtM&utm_medium=referral&utm_source=youtube.com&utm_content=description

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_ByV69RZ6wtM&utm_medium=referral&utm_source=youtube.com&utm_content=description

► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/envato
► Follow Envato on Facebook: https://www.facebook.com/envato
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -