This month’s edition of Exciting New Tools for Designers and Developers focuses on getting work done smarter.
We have invoicing apps and scheduling tools. Some resources will save you the trouble of hiring a designer or developer. And there are some really helpful testing and prototyping tools.
Glaze
Rise
Rise is an intelligent time tracker that helps you maximize your productivity. It’s an excellent solution for freelancers hoping to improve their income.
Relicx
Relicx is a testing app that tracks down the UX issues in your product using real user journeys. It’s 10x more effective than beta testing.
Outerbase
Outerbase is a GUI for your database. Easily view, edit, and manage all of the data in your database without needing to know SQL.
Selldone
Selldone is an enterprise-grade service for building large-volume ecommerce experiences. It’s no-code, white-labeled, and can handle millions of orders.
Cakedesk
Cakedesk is an excellent invoicing app for freelancers. You can send invoices and proposals and build a database of clients.
Roastd
Roastd is a feedback service that’s not for the faint of heart. You can pay for brutally honest feedback, and although it may hurt, acting on it will improve your conversions.
Galileo AI
Galileo AI is a new service that promises to design user interfaces for you. Trained on thousands of designs, it uses AI to create a design based on a text prompt.
Sizzy
Sizzy is a powerful browser for web development that packs all the tools you need into a single app. You can test different device sizes, debug, and it integrates with lots of devtools.
Linke
Linke is a link manager that lets you create fully branded short links that you can share on social media, your website, or via email. You’ll get notified whenever it’s clicked.
AssemblyAI
AssemblyAI is a speech recognition API that uses AI to detect speech, transcribe it to text, and understand it. It’s an incredible resource for anyone building customer service apps.
Freelance Brain
Freelance Brain is an add-on for Notion that helps you manage your freelance business. You can manage clients and projects for a more straightforward work life.
Glint
Glint is an excellent free GUI for Git. It allows you to version control your files in a visual manner, so you don’t need to mess around with the command line.
Maya
Maya is an AI assistant for startups. So instead of spending valuable time hunting through your data for answers, ask Maya and get better answers faster.
PersonaGen
PersonaGen is a fantastic alternative to spending hours writing personas for user testing. It uses the power of AI to create your personas in seconds.
Designing an onboarding process can be tricky; there are so many different options, and if you get it wrong, you could turn users off. This freebie is a great starting point for your own designs, either for prototyping or as a sanity check to ensure that you’ve included the essentials.
This awesome UI kit designed by Premium UI Kits features 28 mobile screens. The designs are based on the onboarding process for a budget planner, but they’re super easy to customize and can easily be transformed into any onboarding or sign-up process.
The design is in the popular minimal-tech style and features pill-shaped buttons and subtle gradients that make the screens feel both familiar and fresh.
All of the graphics are 100% vector-based, using customizable symbols for Sketch and Figma users.
You can use the Budget Planner Mobile UI Kit on your sites for free. Download it here now.
There’s a common theme in this month’s collection of website design trends – typography. All three of these trends showcase popular type elements that seem to be exploding in popularity.
Here’s what’s trending in design this month.
1. Focus on Typography
Admittedly this trend seems a little vague, but we think you’ll know it when you see it. Plenty of projects are being designed with an emphasis on typography.
This includes big, bold lettering, interesting typefaces, big variances in size or color, tiny type animations, and an overall stripping of strong imagery from the screen. You won’t see many photos or videos here (and if you do, they are probably small).
After that, almost anything is allowed. And the designs are quite stunning!
These projects include all kinds of typography, from experimental to bold. (You can even find it in the new typography animation in the new design for this website in the homepage banner.)
Here are three examples of three very different directions on this website design trend:
IGZIST combines an oversized slab serif with a handwriting style that takes the whole screen. With a black-and-white aesthetic and red accent, everything has an in-your-face feel. There’s a glitch animation that also layers on top of everything to keep it interesting.
Contra Bureau combines a too-close-for-comfort headline in “CONTRA” with sideways text, a sub-headline with underlines, and multiple typefaces in a bold red and beige color scheme to make you hang on to every word. Immense contrast in style and size contribute to the effectiveness of this typographic gem.
Readymag uses an interesting typeface in a color variable animation to make you ready and get your attention. The green-on-white pattern isn’t common and is a bit of a disruptor in itself. The most graphic elements on the screen are the navigation buttons and the brackets for small text elements.
2. Heroes with Very Little Text
This typography trend actually includes very little text. Many designers are creating hero headers with almost no text at all aside from simple navigation.
How does this work? How does a user engage when there isn’t anything to read?
The images have to be super engaging. And even then, this design style can still be a risk. Look at the examples below; is there enough to make you click or scroll?
Mathijs Hanenkamp’s portfolio site uses a big photo with a small headline in the bottom left corner. But there’s an interesting top layer with animation that makes you think are little more. Then when you realize it is for a photographer’s portfolio, everything kind of comes together.
AB Yachts has no text on the home hero besides the name brand. If you know the company, the video is probably enough to keep you going, but if not, it could be more of a stretch for unfamiliar users to continue engaging.
Edlewerke focuses on an unusual image (there’s also a tiny animation here) and navigation to help you move through the site. It’s visually striking, but is it enough? Tracking analytics on a design like this would definitely hold the answer to that question.
3. Serifs Everywhere
For designers that came up in the world of print, this website design trend can be a breath of fresh air – serifs everywhere!
While serifs have become much more common with websites, they still don’t come close to the usage of sans serifs. The right serifs can be beautiful and highly readable.
They can also be used in various ways to create a design with a nice focus on typography that isn’t the only focus of the design. This trend is more of a middle ground between the two more extreme examples above.
Momset uses a somewhat larger condensed modern serif for the primary headline in the hero area as well as other headers throughout the design. Color adds an extra element of interest here, and the use of space keeps this typeface readable.
Mbau goes super simple with a full-screen video that rolls behind a simple serif headline that never moves. This design feels elegant and classy, perfect for a travel site. Using “exclusive” in italics almost jumps off the screen because the design pulsates with that feeling.
Caddis Eye Appliances uses a large serif headline and subheaders balanced by smaller sans serif elements for other text elements. What’s fun about his entire design is that it is about being different – they use the term “nonconformists” – and the serif helps exemplify that mantra visually.
Conclusion
Typography trends are an exciting design element because, depending on your brand – and style guide – you may or may not be able to take advantage of these elements. How do you balance incorporating a trend and maintaining brand identity?
There’s not always an obvious answer, but many brands do find a way to create just the right elements to keep themselves looking fresh without losing who they are. Look at your brand rules to decide what constraints you have to work within and how you can bend to be both on-brand and on-trend.
Icons are essential for successful web design. They provide an eye-catching, unobtrusive way to communicate important information and improve user experience. With icons, websites become more interesting and easier to navigate.
These Free Education Icons are designed to help you add visual appeal and emphasize key ideas that complement the content of your website.
The simple, colorful modern design of these line icons make them perfect for use by students, teachers, and institutions. They’re a fun way to represent education-related topics like mathematics or chemistry. Each icon is supplied in vector format as a .ai and a .svg file, so you can scale them to fit your designs without losing quality.
The fonts you embed in your website transform the design and can mean the difference between an extraordinary brand experience and a high bounce rate.
And so, every month, we put together this roundup of the fifteen best new fonts that have caught our eye over the past four weeks. Enjoy!
Dewey Decimal
Dewey Decimal is a modern take on the typewriter style of typeface. It’s proportional, with a large x-height and open counters, making it ideal for use on the web.
First Aid Kit
First Aid Kit is an interesting take on a typeface because each weight is a different style. It’s a smorgasbord of options that hands you plenty of bang for your buck.
Vangeda
Vangeda is a display font that’s perfectly on trend for the Art Nouveau revival that’s been gathering pace since last year. It’s ideal for branding or large print work.
Mint Grotesk
Mint Grotesk is a quirky sans serif with an extensive range of options, including stylistic alternatives and tabular figures. It’s a great workhorse and ideal for UI designs.
Ada
Ada is a contemporary calligraphic script font based on the Ruq’ah Arabic style. It includes Arabic and Latin characters and has three variations: sharp, flat, and round.
Sterlington
Sterlington is an ornate script with numerous flourishes referencing the grandiose style of the Victorian era. It’s crying out to be used on a Sherlock Holmes anthology.
Vinco
Vinco is a curvaceous serif with elegant strokes and a subtle organic flourish in letters like a, f, and y that reduces its formality, especially in the bolder weights.
Marige
Marige is a chunky serif with minutely flared terminals. Its confident but informal shape is excellent for editorial design or branding work.
Similar
Similar is a workhorse sans serif that looks pretty, well, similar to a lot of corporate sans serifs you’ve seen before, except for some lovely details that emphasize the baseline.
Ravera
Ravera is a brush script that leans into its hand-drawn look. It’s available in regular or texture, the latter of which adds a nice woodblock print effect for extra grunge.
Baste
Baste is a sans serif that was inspired by southern France, reflecting the softness of the shoreline and the edginess of cities like Marseilles.
Artusi
Artusi is a delicious serif font that’s inspired by an influential Italian cookbook writer. It’s available as a variable font, and the refined style is carried through all weights.
Parnaso
Parnaso is a high-contrast serif with fine details and a solid rhythm. Its italic is lively and playful. It’s ideal for running text, and its display variation is excellent at larger sizes.
Fitzgerald in Berlin
Fitzgerald in Berlin is a retro serif with contemporary details. Its shapes verge on the calligraphic, and it’s a solid choice for branding projects that need a touch of heritage.
Rockers Garage
Everyone loves a good brush script, and Rockers Garage fits the bill perfectly. Its clear rhythm provides excellent legibility, and the texture is nice and subtle.
Users are faced with decision-making on websites every day. The decision-making process can be far more complex than it appears, and poor decision-making can lead to user dissatisfaction, decreased sales, and damage to brand value. For this reason, it’s imperative that designers focus on decision-making throughout the entire UX workflow.
UX, from a decision-making perspective, means focusing on a user’s context and individual needs. How does the immediate decision fit into the user’s broader goals? What is influencing their decision? Do they have enough information to make an informed decision they won’t regret?
Decision-making can be complex, and it’s made all the more problematic when users don’t have enough information to make a decision. UX designers can address this by communicating all options and potential outcomes and providing visual cues to make decision-making more intuitive.
Tip 1: Structure Decisions Around The User’s Needs
A decision structure is a framework within which a user can make a choice. For example, should they keep exploring a site or abandon it? A good decision structure is transparent (meaning that the available options and the consequences of each option are clear) and consistent so that making one decision makes it easier to make the next.
The mistake that too many designers make is to create a decision structure around a company’s needs rather than the user’s.
Consider the issue of online flower sales. From a florist’s perspective, an order is received and then dispatched based on the customer’s preferred shipping options. From a company point of view, it makes sense to offer a range of bouquets, followed by the available delivery options. And that is how most e-commerce sites structure the decision-making process.
However, from the perspective of a person who has forgotten Valentine’s day, what matters most are the delivery options because day-late flowers are worse than gas station flowers. In that case, the shipping options — specifically confirmation that delivery in a specific time frame is possible — should precede product selection.
You’re more likely to deliver a positive user experience by designing decision structures around a customer’s needs.
Tip 2: Make Decisions Clear
Data doesn’t affect human beings in the same way that it affects algorithms, but if designers can communicate data in a way that makes sense to the human brain, we’ll have more information, and we’ll be able to make decisions in a more logical, algorithmic fashion.
This is where UI design comes into its own. Effective UI design can make sense of complex data with color and hierarchy to highlight data that is critical to the customer’s current task. What designers need to do is constructively editorialize the data.
One important technique is to focus on context. Presenting data in context makes it easier for a person to comprehend the information being conveyed. For example, if you sell a product at a discount, always present the original price alongside the discounted price, and even better, highlight how much the user is saving.
Tip 3: Reward Decision-Making
Human beings are pretty easy to manipulate — hence the prevalence of black-hat UX techniques littering the web. Different chemicals are released into a user’s system when good things happen — which is why gambling machines light up when you put money into them. One of the simplest ways to encourage users to take action is to reward them with positive chemicals in their system each time they do so.
Because we’re not using black-hat techniques, we don’t want to reward a particular choice — that would be coercive — we want to reward the decision (any decision), no matter how small. Even something as simple as a pretty hover state on a link can reward a user for engaging with the UI and build positive feelings.
When users feel good about small decisions (like reading more details about a product), they’re more likely to make big decisions (like purchasing the product).
Tip 4: Repeat Critical Information
The human brain excels at fast decision-making. This is because it evolved that way as a defense mechanism — the faster you decide something is dangerous, the more likely you are to survive long enough to procreate.
Unfortunately, the human brain is also finite, and we somehow have to make up for this speed. And so the brain sacrifices memory recall in favor of speed. As a result, we tend to make decisions based on what is in front of us when we make the decision. That’s not to say we don’t rely on experience at all, but the human brain prefers current input over recalled input.
If you want a user to make an informed decision, make sure that all of the most critical information is in front of them all the time. For instance, if you want to reduce cart abandonment on an e-commerce site, ensure the product list is sufficiently detailed so that the user doesn’t need to rely on the memory of why they chose to add the item to their cart to complete the checkout.
Tip 5: Boost Confidence With Graceful Error Handling
Error handling is one of the most critical aspects of UI design because try, as you might, you will never be able to design an interface that a user can’t abuse, misuse, or break. Anyone who has conducted extensive user testing will tell you that users often break things simply to see if they can. They are like infants, testing boundaries to discover where their limits lie.
And so, if you design a website that handles errors gracefully, you enable users to explore without fear of doing irreparable damage, and they will be far more likely to make a decision.
It can be as simple as giving the user a way to undo a decision. A simple pop-up that asks, “Are you sure?” Is an excellent way of reassuring a user that their choices won’t have lasting consequences.
Helping Users Make Smart Decisions
Decision-making is a complex process — there’s no one-size-fits-all solution. The key to making decision-making easier for your users is to remember that good UX isn’t about forcing decisions; it’s about giving the user the information they need to make an informed decision of their own.
By structuring decisions around user needs, presenting information clearly, rewarding decision-making, repeating critical information, and handling errors gracefully, you can help users make decisions that benefit both them and your client’s business goals. It all starts with understanding the decision-making process — then it’s a question of finding ways to work within those parameters.
The quality of websites in 2023 has moved up a gear, with designers cherry-picking trends as tools, embracing new ideas, and plenty of innovative UI details.
Every month we put together this roundup of the best new websites we’ve seen over the previous four weeks. In February’s edition, you’ll find warm colors to brighten grey days and lots of animation. Enjoy!
CTRL SHIFT!
CTRL SHIFT! is a podcast about people who changed the world by changing their perspectives. Its site features an excellent scrolling set of animations.
Earthfoam
Earthfoam is a new kind of mattress and pillow. It uses soft colors and subtle animation to create a sense of calm and well-being. There’s fantastic attention to detail on this site.
July 01
The microsite for July 01, a new typeface from Studio K95, is brilliantly engaging with retro art direction and some well-chosen gradients. This is how fonts should be sold.
The Checkout 2022
The Checkout 2022 is a look back at last year through the lens of purchases made via Klarna. The microsite features pixel-style animation and typography that is very 2023.
Water
Water is a collection of kitchen products by Falmec. The site is like a high-end brochure, with intelligent content design and an overarching aesthetic.
Summer Afternoon
Summer Afternoon is a beautiful Studio Ghibli-esque 3D experiment. Explore the environment and discover five different secrets. It’s delightful.
Maciej Zadykowicz
Maciej Zadykowicz’s portfolio is suitably dark mode for someone who specializes in Ethereum and web3, but it’s brought to life by the splashes of animated color.
Dot Pad
Dot Pad is an innovative tactile display for visual data. It allows you to feel the world you see. Its site has many clever details; we particularly like what happens with the menu when you scroll.
Cal.com
Cal.com is an event scheduler app. Its site features black-and-white typography that is elevated by subtle shadows and a clear hierarchy. Simple ordered, and appropriate.
Pure Sunfarms
Pure Sunfarms sells cannabis, and its retro vibes take us all back to long Summer days when the world seemed more innocent and chilled.
Madre Mezcal
The warm terracotta color of Madre Mezcal transports you to warmer climes. The illustrations and typography are on-brand, but what we really love is the variable scrolling on the content columns.
Fey
Fey is an app for investors, and its simple site is suitably restrained and high-quality. Some nice animations do a great job of highlighting the app’s features.
Carl Beaverson
Carl Beaverson’s portfolio is an exercise in restraint. It‘s just a series of tastefully presented thumbnails. Obvious accessibility issues aside, the pale text looks beautiful against the soft grey backgrounds.
Bakstad Construction
2022’s Brutalism trend has waned, and we’re seeing a lot less of the style. But in the case of Bakstad Construction, nothing could be more appropriate.
Nightworks
Nightworks creates stunning lighting products that would grace any home. Its site oozes luxury from every pixel. The type, colors, and layout all convey quality.
Village
We’re used to team scheduling apps, but Village is a team scheduling app for your family. The desaturated colors and modern look is perfectly pitched at young families.
Hotel 23
Hotel 23 is amazing-looking in Medellín, Columbia. Its site features shapes and colors that reflect the building’s decor, and the room slideshow is charming and original.
Flat Camp
Flat Camp is a retreat for up to 50 members of the Statamic community. Its site is clean and clear without being dull and minimal. And the hilltop illustration is highly appealing.
Aviv Katz
We love the playfulness of Aviv Katz’s portfolio. There’s lots to explore in the UI and some great work on display.
Samara
When you’re selling six-figure products, you better have a great site. Samara sells small houses that fit in a backyard, with everything you need included. It’s ideal for a home office or an Airbnb.
It’s a question I hear asked quite often: Is it possible to create shadows from gradients instead of solid colors? There is no specific CSS property that does this (believe me, I’ve looked) and any blog post you find about it is basically a lot of CSS tricks to approximate a gradient. We’ll actually cover some of those as we go.
But first… another article about gradient shadows? Really?
Yes, this is yet another post on the topic, but it is different. Together, we’re going to push the limits to get a solution that covers something I haven’t seen anywhere else: transparency. Most of the tricks work if the element has a non-transparent background but what if we have a transparent background? We will explore this case here!
Before we start, let me introduce my gradient shadows generator. All you have to do is to adjust the configuration, and get the code. But follow along because I’m going to help you understand all the logic behind the generated code.
Let’s start with the solution that’ll work for 80% of most cases. The most typical case: you are using an element with a background, and you need to add a gradient shadow to it. No transparency issues to consider there.
The solution is to rely on a pseudo-element where the gradient is defined. You place it behind the actual element and apply a blur filter to it.
.box {
position: relative;
}
.box::before {
content: "";
position: absolute;
inset: -5px; /* control the spread */
transform: translate(10px, 8px); /* control the offsets */
z-index: -1; /* place the element behind */
background: /* your gradient here */;
filter: blur(10px); /* control the blur */
}
It looks like a lot of code, and that’s because it is. Here’s how we could have done it with a box-shadow instead if we were using a solid color instead of a gradient.
box-shadow: 10px 8px 10px 5px orange;
That should give you a good idea of what the values in the first snippet are doing. We have X and Y offsets, the blur radius, and the spread distance. Note that we need a negative value for the spread distance that comes from the inset property.
Here’s a demo showing the gradient shadow next to a classic box-shadow:
CodePen Embed Fallback
If you look closely you will notice that both shadows are a little different, especially the blur part. It’s not a surprise because I am pretty sure the filter property’s algorithm works differently than the one for box-shadow. That’s not a big deal since the result is, in the end, quite similar.
This solution is good, but still has a few drawbacks related to the z-index: -1 declaration. Yes, there is “stacking context” happening there!
CodePen Embed Fallback
I applied a transform to the main element, and boom! The shadow is no longer below the element. This is not a bug but the logical result of a stacking context. Don’t worry, I will not start a boring explanation about stacking context (I already did that in a Stack Overflow thread), but I’ll still show you how to work around it.
The first solution that I recommend is to use a 3D transform:
Instead of using z-index: -1, we will use a negative translation along the Z-axis. We will put everything inside translate3d(). Don’t forget to use transform-style: preserve-3d on the main element; otherwise, the 3D transform won’t take effect.
CodePen Embed Fallback
As far as I know, there is no side effect to this solution… but maybe you see one. If that’s the case, share it in the comment section, and let’s try to find a fix for it!
If for some reason you are unable to use a 3D transform, the other solution is to rely on two pseudo-elements — ::before and ::after. One creates the gradient shadow, and the other reproduces the main background (and other styles you might need). That way, we can easily control the stacking order of both pseudo-elements.
.box {
position: relative;
z-index: 0; /* We force a stacking context */
}
/* Creates the shadow */
.box::before {
content: "";
position: absolute;
z-index: -2;
inset: -5px;
transform: translate(10px, 8px);
background: /* .. */;
filter: blur(10px);
}
/* Reproduces the main element styles */
.box::after {
content: """;
position: absolute;
z-index: -1;
inset: 0;
/* Inherit all the decorations defined on the main element */
background: inherit;
border: inherit;
box-shadow: inherit;
}
CodePen Embed Fallback
It’s important to note that we are forcing the main element to create a stacking context by declaring z-index: 0, or any other property that do the same, on it. Also, don’t forget that pseudo-elements consider the padding box of the main element as a reference. So, if the main element has a border, you need to take that into account when defining the pseudo-element styles. You will notice that I am using inset: -2px on ::after to account for the border defined on the main element.
As I said, this solution is probably good enough in a majority of cases where you want a gradient shadow, as long as you don’t need to support transparency. But we are here for the challenge and to push the limits, so even if you don’t need what is coming next, stay with me. You will probably learn new CSS tricks that you can use elsewhere.
Transparent solution
Let’s pick up where we left off on the 3D transform and remove the background from the main element. I will start with a shadow that has both offsets and spread distance equal to 0.
CodePen Embed Fallback
The idea is to find a way to cut or hide everything inside the area of the element (inside the green border) while keeping what is outside. We are going to use clip-path for that. But you might wonder how clip-path can make a cut inside an element.
Indeed, there’s no way to do that, but we can simulate it using a particular polygon pattern:
Tada! We have a gradient shadow that supports transparency. All we did is add a clip-path to the previous code. Here is a figure to illustrate the polygon part.
The blue area is the visible part after applying the clip-path. I am only using the blue color to illustrate the concept, but in reality, we will only see the shadow inside that area. As you can see, we have four points defined with a big value (B). My big value is 100vmax, but it can be any big value you want. The idea is to ensure we have enough space for the shadow. We also have four points that are the corners of the pseudo-element.
The arrows illustrate the path that defines the polygon. We start from (-B, -B) until we reach (0,0). In total, we need 10 points. Not eight points because two points are repeated twice in the path ((-B,-B) and (0,0)).
There’s still one more thing left for us to do, and it’s to account for the spread distance and the offsets. The only reason the demo above works is because it is a particular case where the offsets and spread distance are equal to 0.
Let’s define the spread and see what happens. Remember that we use inset with a negative value to do this:
CodePen Embed Fallback
The pseudo-element is now bigger than the main element, so the clip-path cuts more than we need it to. Remember, we always need to cut the part inside the main element (the area inside the green border of the example). We need to adjust the position of the four points inside of clip-path.
We’ve defined a CSS variable, --s, for the spread distance and updated the polygon points. I didn’t touch the points where I am using the big value. I only update the points that define the corners of the pseudo-element. I increase all the zero values by --s and decrease the 100% values by --s.
CodePen Embed Fallback
It’s the same logic with the offsets. When we translate the pseudo-element, the shadow is out of alignment, and we need to rectify the polygon again and move the points in the opposite direction.
There are two more variables for the offsets: --x and --y. We use them inside of transform and we also update the clip-path values. We still don’t touch the polygon points with big values, but we offset all the others — we reduce --x from the X coordinates, and --y from the Y coordinates.
Now all we have to do is to update a few variables to control the gradient shadow. And while we are at it, let’s also make the blur radius a variable as well:
CodePen Embed Fallback
Do we still need the 3D transform trick?
It all depends on the border. Don’t forget that the reference for a pseudo-element is the padding box, so if you apply a border to your main element, you will have an overlap. You either keep the 3D transform trick or update the inset value to account for the border.
Here is the previous demo with an updated inset value in place of the 3D transform:
CodePen Embed Fallback
I‘d say this is a more suitable way to go because the spread distance will be more accurate, as it starts from the border-box instead of the padding-box. But you will need to adjust the inset value according to the main element’s border. Sometimes, the border of the element is unknown and you have to use the previous solution.
With the earlier non-transparent solution, it’s possible you will face a stacking context issue. And with the transparent solution, it’s possible you face a border issue instead. Now you have options and ways to work around those issues. The 3D transform trick is my favorite solution because it fixes all the issues (The online generator will consider it as well)
Adding a border radius
If you try adding border-radius to the element when using the non-transparent solution we started with, it is a fairly trivial task. All you need to do is to inherit the same value from the main element, and you are done.
CodePen Embed Fallback
Even if you don’t have a border radius, it’s a good idea to define border-radius: inherit. That accounts for any potential border-radius you might want to add later or a border radius that comes from somewhere else.
It’s a different story when dealing with the transparent solution. Unfortunately, it means finding another solution because clip-path cannot deal with curvatures. That means we won’t be able to cut the area inside the main element.
This part was very tedious, and I struggled to find a general solution that doesn’t rely on magic numbers. I ended up with a very complex solution that uses only one pseudo-element, but the code was a lump of spaghetti that covers only a few particular cases. I don’t think it is worth exploring that route.
I decided to insert an extra element for the sake of simpler code. Here’s the markup:
<div class="box">
<sh></sh>
</div>
I am using a custom element, , to avoid any potential conflict with external CSS. I could have used a
, but since it’s a common element, it can easily be targeted by another CSS rule coming from somewhere else that can break our code.
The first step is to position the element and purposely create an overflow:
As you can see, the pseudo-element uses the same code as all the previous examples. The only difference is the 3D transform defined on the element instead of the pseudo-element. For the moment, we have a gradient shadow without the transparency feature:
CodePen Embed Fallback
Note that the area of the element is defined with the black outline. Why I am doing this? Because that way, I am able to apply a mask on it to hide the part inside the green area and keep the overflowing part where we need to see the shadow.
I know it’s a bit tricky, but unlike clip-path, the mask property doesn’t account for the area outside an element to show and hide things. That’s why I was obligated to introduce the extra element — to simulate the “outside” area.
Also, note that I am using a combination of border and inset to define that area. This allows me to keep the padding-box of that extra element the same as the main element so that the pseudo-element won’t need additional calculations.
Another useful thing we get from using an extra element is that the element is fixed, and only the pseudo-element is moving (using translate). This will allow me to easily define the mask, which is the last step of this trick.
It’s done! We have our gradient shadow, and it supports border-radius! You probably expected a complex mask value with oodles of gradients, but no! We only need two simple gradients and a mask-composite to complete the magic.
Let’s isolate the element to understand what is happening there:
Note how the inner radius matches the main element’s border-radius. I have defined a big border (150px) and a border-radius equal to the big border plus the main element’s radius. On the outside, I have a radius equal to 150px + R. On the inside, I have 150px + R - 150px = R.
We must hide the inner (blue) part and make sure the border (red) part is still visible. To do that, I’ve defined two mask layers —One that covers only the content-box area and another that covers the border-box area (the default value). Then I excluded one from another to reveal the border.
Yes, this definitely not perfect. The first issue you may face is related to using a border on the main element. This may create a small misalignment in the radii if you don’t account for it. We have this issue in our example, but perhaps you can hardly notice it.
The fix is relatively easy: Add the border’s width for the element’s inset.
Another drawback is the big value we’re using for the border (150px in the example). This value should be big enough to contain the shadow but not too big to avoid overflow and scrollbar issues. Luckily, the online generator will calculate the optimal value considering all the parameters.
The last drawback I am aware of is when you’re working with a complex border-radius. For example, if you want a different radius applied to each corner, you must define a variable for each side. It’s not really a drawback, I suppose, but it can make your code a bit tougher to maintain.
The online generator only considers a uniform radius for the sake of simplicity, but you now know how to modify the code if you want to consider a complex radius configuration.
Wrapping up
We’ve reached the end! The magic behind gradient shadows is no longer a mystery. I tried to cover all the possibilities and any possible issues you might face. If I missed something or you discover any issue, please feel free to report it in the comment section, and I’ll check it out.
Again, a lot of this is likely overkill considering that the de facto solution will cover most of your use cases. Nevertheless, it’s good to know the “why” and “how” behind the trick, and how to overcome its limitations. Plus, we got good exercise playing with CSS clipping and masking.
And, of course, you have the online generator you can reach for anytime you want to avoid the hassle.
Every now and then, a one blog post is published and it spurs a reaction or response in others that are, in turn, published as blogs posts, and a theme starts to emerge. That’s what happened this past week and the theme developed around the cost of JavaScript frameworks — a cost that, in this case, reveals just how darn important it is to use JavaScript responsibly.
This is where the story begins. Eric goes to a health service provider website to book an appointment and gets… a blank screen.
In addition to a terrifying amount of telemetry, Modern Health’s customer-facing experience is delivered using React and Webpack.
If you are familiar with how the web is built, what happened is pretty obvious: A website that over-relies on JavaScript to power its experience had its logic collide with one or more other errant pieces of logic that it summons. This created a deadlock.
If you do not make digital experiences for a living, what happened is not obvious at all. All you see is a tiny fake loading spinner that never stops.
D’oh. This might be mere nuisance — or even laughable — in some situations, but not when someone’s health is on the line:
A person seeking help in a time of crisis does not care about TypeScript, tree shaking, hot module replacement, A/B tests, burndown charts, NPS, OKRs, KPIs, or other startup jargon. Developer experience does not count for shit if the person using the thing they built can’t actually get what they need.
This is the big smack of reality. What happens when our tooling and reporting — the very things that are supposed to make our work more effective — get in the way of the user experience? These are tools that provide insights that can help us anticipate a user’s needs, especially in a time of need.
I realize that pointing the finger at JavaScript frameworks is already divisive. But this goes beyond whether you use React or framework d’jour. It’s about business priorities and developer experience conflicting with user experiences.
Partisans for slow, complex frameworks have successfully marketed lemons as the hot new thing, despite the pervasive failures in their wake, crowding out higher-quality options in the process.
These technologies were initially pitched on the back of “better user experiences”, but have utterly failed to deliver on that promise outside of the high-management-maturity organisations in which they were born. Transplanted into the wider web, these new stacks have proven to be expensive duds.
There’s the rub. Alex ain’t mincing words, but notice that the onus is on the way frameworks haved been marketed to developers than developers themselves. The sales pitch?
Once the lemon sellers embed the data-light idea that improved “Developer Experience” (“DX”) leads to better user outcomes, improving “DX” became and end unto itself, and many who knew better felt forced to play along. The long lead times in falsifying trickle-down UX was a feature, not a bug; they don’t need you to succeed, only to keep buying.
As marketing goes, the “DX” bait-and-switch is brilliant, but the tech isn’t delivering for anyone but developers.
Tough to stomach, right? No one wants to be duped, and it’s tough to admit a sunken cost when there is one. It gets downright personal if you’ve invested time in a specific piece of tech and effort integrating it into your stack. Development workflows are hard and settling into one is sorta like settling into a house you plan on living in a little while. But you’d want to know if your house was built on what Alex calls a “sandy foundation”.
I’d just like to pause here a moment to say I have no skin in this debate. As a web generalist, I tend to adopt new tools early for familiarity then drop them fast, relegating them to my toolshed until I find a good use for them. In other words, my knowledge is wide but not very deep in one area or thing. HTML, CSS, and JavaScript is my go-to cocktail, but I do care a great deal about user experience and know when to reach for a tool to solve a particular thing.
And let’s acknowledge that not everyone has a say in the matter. Many of us work on managed teams that are prescribed the tools we use. Alex says as much, which I think is important to call out because it’s clear this isn’t meant to be personal. It’s a statement on our priorities and making sure they along to user expectations.
Just blocking a file shouldn’t totally wreck a website, but it often does! In JavaScript, that may be because the developers have written first-party JavaScript (which I’ll generally allow) that depends on third-party JavaScript (which I’ll generally block).
[…]
If I block resources from tracking-website.com, now my first-party JavaScript is going to throw an error. JavaScript isn’t chill. If an error is thrown, it doesn’t execute more JavaScript further down in the file. If further down in that file is transitionToOnboarding();— that ain’t gonna work.
Maybe it’s worth revisiting your workflow and tweaking it to account to identify more points of failure.
So here’s an idea: Run your end-to-end tests in browsers that have popular content blockers with default configs installed.
Doing so may uncover problems like this that stop your customers, and indeed people in need, from being stopped in their tracks.
Good idea! Hey, anything that helps paint a more realistic picture of how the app is used. That sort of clarity could happen a lot earlier in the process, perhaps before settling on development decisions. Know your users. Why are they using the app? How do they browse the web? Where are they phsically located? What problems could get in their way? Chris has a great talk on that, too.
Despite the massive strides tech has taken in the last few years, we rarely see a week as tumultuous as this.
When your grandkids ask you where you were when AI took over, you’ll be reminiscing about February 2023.
ChatGPT Goes ‘Pro’
First, we felt a great disturbance in AI, as if millions of chatbots cried out in terror and were suddenly silenced. ChatGPT has reached capacity.
ChatGPT is one of the more accomplished AI tools available, and until now, it’s been free to use, which has prompted an AI gold rush — ProductHunt transformed in weeks into a list of ‘trustworthy’ chatbots. OpenAI, the company behind ChatGPT, is a commercial company and has opted to release a premium account for ChatGPT that provides priority access for $20/month.
In addition to derailing the plans of thousands of indy-developers, there are ethical questions about an AI that is trained on other people’s content, questions that were less pressing when access was free.
Bing Chat Beats Google
Google has dominated search for a long time. Its main strength has been its jealously guarded algorithm.
When Microsoft — no stranger itself to monopolies — launched Bing, there was speculation that Google would lose its dominance. But the move away from Google never materialized.
So Bing’s product team returned to the drawing board to find a way to combat Google’s algorithm. The solution they came up with was Bing Chat, a chatbot that, in addition to returning search results, would also answer the query in a simple statement cribbed from the most credible results.
Bing Chat is powered by ChatGPT — Microsoft is presumably paying $20/month for priority access.
The move from search engines directing users to results hosted on sites to search engines taking, rewriting, and presenting answers as their own will make the fuss over AMP pale into insignificance.
Google Bard Gets It Wrong
Google was so spooked by Bing Chat that it rushed out a preview of Bard, its own AI-powered service.
Google is generally regarded as one of the leading lights in AI research, so being caught napping when it can to AI search integration must have stung someone into pushing the launch button too soon.
In a preview video intended to take the wind out of Microsoft’s sails, Bard was asked, “What new discoveries from the James Webb space telescope can I tell my nine-year-old about?” The response from Bard stated the JWST took the very first pictures of a planet outside of Earth‘s solar system. However, those very first photos were actually taken in 2004, 17 years before the JWST was launched.
And just like that, $100 billion was wiped off (Google parent company) Alphabet‘s share price.
As Google spokespeople were quick to point out, Bard is still being tested and will be much more powerful when using the full version of LaMDA. But the error highlights one of the biggest problems with AI content: It is not only highly inaccurate but also extremely convincing, making errors difficult to spot.
What’s Next?
The thrust and parry between Google Bard and Microsoft Bing leaves us on the brink of another remarkable technology race. Bing won the first round, but somewhere in The Googleplex, an audit is taking place with the express purpose of not losing any more ground. And this is all before the rumored Apple iSearch is installed by default on millions of iPhones.
There are so many ethical, technical, and cultural questions surrounding AI that it’s impossible to know where this is heading.
One thing is certain: something changed this week. We’ve seen the first exchanges in a competition that will transform the web over the next decade.
