How to Сreate Soft UI Elements

Published in

@hellotegra

3 min readApr 13, 2020

How to Сreate Soft UI Elements 🌀

Courtesy of @alexunderhess.design
⠀
Hey folks,
⠀
Today you will learn how to create soft UI elements for dark theme 🌑
⠀
I came up with this term Soft UI only because it looks soft to me.
⠀
Haha 😁
⠀
So, soft UI, dark theme.
⠀
Create a rectangle, set the color the same as the background color, add a light shadow at the top left side and dark shadow on the right bottom side.
⠀
Experiment with shapes, colors, directions 🌈

TODAY ON OUR PLATE HOW TO CREATE SOFT UI FOR DARK THEME

DRAW A RECTANGLE

420X420
RADIUS: 60
COLOR: DOESN’T MATTER

ADD DROP SHADOW #1

BLUR: 70
X: -25 Y: -25
COLOR: 383838
OPACITY: 30%

ADD DROP SHADOW #2

BLUR: 70
X: 25 Y: 25
COLOR: 000000
OPACITY: 35%

CHANGE THE COLOR OF THE RECTANGLE

COLOR: 181818

PLAY WITH COLOR AND SHAPE

EXPERIMENT WITH SHADOW DIRECTION AS WELL

Bonus — 4 tools that may be useful in your designer way:

Crello — the simplest online image editor. A simple but powerful tool to create awesome designs for any social media format — posts, covers, graphics, and posters using the best software on the web. It’s easy! A lot of animated designs.
Funnelytics — an incredible tool that helps you build the best marketing funnel mapping.
Webflow — all-in-one web design tool that allows users to design, build, and launch responsive websites visually.
Flowkit — allows designers to create frighteningly fast user flows within Sketch and Figma.

Be free to send us any feedback by reply or reach us in DM on Instagram
Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.