VOOZH about

URL: https://www.coursera.org/learn/css-effects-shadows-gradients-animations

⇱ CSS UI Effects: Shadows, Gradients & Animations | Coursera

CSS UI Effects: Shadows, Gradients & Animations

Ends soon! Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.

CSS UI Effects: Shadows, Gradients & Animations

This course is part of Improve your CSS Specialization

Included with

Gain insight into a topic and learn the fundamentals.
Intermediate level

Recommended experience

3 hours to complete
Flexible schedule
Learn at your own pace
Gain insight into a topic and learn the fundamentals.
Intermediate level

Recommended experience

3 hours to complete
Flexible schedule
Learn at your own pace

What you'll learn

  • Create visually engaging shadows and gradients to add depth and polish to UI components.

  • Apply responsive, interactive animations that enhance user experience without overwhelming the design.

  • Combine layering techniques to produce professional, cohesive designs for any screen size.

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

3 assignments

Taught in English

Build your subject-matter expertise

This course is part of the Improve your CSS Specialization
When you enroll in this course, you'll also be enrolled in this Specialization.
  • Learn new concepts from industry experts
  • Gain a foundational understanding of a subject or tool
  • Develop job-relevant skills with hands-on projects
  • Earn a shareable career certificate

There are 3 modules in this course

Transform your UI designs and web sites by combining shadows, gradients, and animations in this practical course.

You’ll learn to create depth with soft and hard shadows, building layered, engaging visuals that enhance your layout. Discover how to apply subtle and dynamic gradients to backgrounds, buttons, and cards, achieving visually appealing effects that guide users’ attention. Finally, you'll bring your designs to life with UI animations, using transitions and hover effects to create a smooth, interactive experience. Each section of this course is hands-on, with challenges that help you apply your skills to real-world components. By the end, you’ll know how to add polish to any interface, creating designs that are functional, interactive, and visually compelling.

Explores the effective use of shadows in UI design, and learn how to utilize various shadow techniques to enhance depth, hierarchy, and visual appeal.

What's included

1 assignment7 plugins

1 assignment•Total 30 minutes
  • CSS Shadows Assignment•30 minutes
7 plugins•Total 28 minutes
  • Welcome to interactive lessons!•1 minute
  • Shadows 101•2 minutes
  • Drop Shadow Playground Setup•5 minutes
  • Challenge 1: Hard & Soft Drop Shadows•7 minutes
  • Challenge 2: Using Shadows to Define Containers•5 minutes
  • Challenge 3: Colored Shadows•5 minutes
  • Quick Tip: Multi-Layered Shadows•3 minutes

Delve into the creative application of gradients in UI design. Leverage the power of color transitions to add depth, visual interest, and enhance the overall aesthetic of user interfaces.

What's included

1 assignment6 plugins

1 assignment•Total 30 minutes
  • CSS Gradients Quiz•30 minutes
6 plugins•Total 30 minutes
  • Introduction•1 minute
  • Challenge 1: Basic Gradient•7 minutes
  • Challenge 2: Button Gradient•7 minutes
  • Challenge 3 Setup HTML & CSS•7 minutes
  • Challenge 3: Card Gradients•4 minutes
  • Challenge 4: Card Gradients (Light Variation)•4 minutes

Bring user interfaces to life with engaging and seamless animations that enhance usability, delight users, and elevate the user experience.

What's included

1 assignment5 plugins

1 assignment•Total 30 minutes
  • UI Animations Quiz•30 minutes
5 plugins•Total 31 minutes
  • Introduction•2 minutes
  • Defining the HTML•4 minutes
  • Defining the Initial CSS for Mobile•8 minutes
  • Challenge 1: Responsive Design•11 minutes
  • Challenge 2: A Simple Hover•6 minutes

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV. Share it on social media and in your performance review.

Instructor

Scrimba
6 Courses•6,358 learners

Explore more from Mobile and Web Development

Why people choose Coursera for their career

👁 Image

Felipe M.

Learner since 2018
"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."
👁 Image

Jennifer J.

Learner since 2020
"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."
👁 Image

Larry W.

Learner since 2021
"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."
👁 Image

Chaitanya A.

"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."

Frequently asked questions

To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.

When you enroll in the course, you get access to all of the courses in the Specialization, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.

Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.

Financial aid available,