4 UI Design styles for modern style trends

Most of the design we will look at will be with css as it is the leading styling language for modern digital applications.

Whether you're coding with react, vue html or android or ios, css is the technology of choice when designing applications.

Let's look at 4 widely used design patterns in CSS today.

1. Subtle shadowing and border radius

Subtleties is everything in web design, it makes the difference between amateur designs and high end professional skill.
For box shadows use them like this:

.box {
   box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

and border-radius usually less than 10px and more than 4px is best

.box {
   border-radius: 8px;
}

2. Color gradients

Color gradients add a creative and nice touch to elements you can use this free online tool to create beautiful gradients:
cssgradient.io

.box {
   background: linear-gradient(124deg, rgba(2,134,255,1) 0%, rgba(0,255,226,1) 100%);
}

3. Button icons

Adding icons to buttons and containers brings out modernity to your your site and app. Use them not sparingly but don't overdo it.
Font awesome is my go to icon source for web and apps:
https://fontawesome.com

<button><i class="fas fa-bolt"></i> Click Me</button>
}

4. Subtle transitions

Transitions can help make your site smooth with animations and adds a modern touch to the user experience. Use animations sparingly and never too slow. One major mistake beginners tend to do is create super slow animations to achieve cool effects but it usually has the opposite effect. Animations should almost always be between 0.1 seconds and 0.3.

button {
   transition: all 0.2s;
   background: #000;
}
button:hover {
   background: #444;
}

Try and use these tips in your next web or app project and enjoy.
Comment what you think of these and feel free to add your own tips below.