October 11, 2024

CSS Tricks That Use Only One Gradient

CSS gradients have been so long that there’s no need to rehash what they are and how to use them. You have surely encountered them at some point in your front-end journey, and if you follow me, you also know that I use them all the time. I use them for CSS patterns, nice CSS decorations, and even CSS loaders. But even so, gradients have a tough syntax that can get very complicated very quickly if you’re not paying attention.

In this article, we are not going to make complex stuff with CSS gradients. Instead, we’re keeping things simple and I am going to walk through all of the incredible things we can do with just one gradient.

Only one gradient? In this case, reading the doc should be enough, no?

No, not really. Follow along and you will see that gradients are easy at their most basic, but are super powerful if we push them — or in this case, just one — to their limits.

CSS patterns

One of the first things you learn with gradients is that we can establish repeatable patterns with them. You’ve probably seen some examples of checkerboard patterns in the wild. That’s something we can quickly pull off with a single CSS gradient. In this case, we can reach for the repeating-conic-gradient() function:

background: 
  repeating-conic-gradient(#000 0 25%, #fff 0 50%) 
  0 / 100px 100px;

A more verbose version of that without the background shorthand:

background-image: repeating-conic-gradient(#000 0 25%, #fff 0 50%);
background-size: 100px 100px;

Either way, the result is the same:

Pretty simple so far, right? You have two colors that you can easily swap out for other colors, plus the background-size property to control the square shapes.

If we change the color stops — where one color stops and another starts — we get another cool pattern based on triangles:

background: 
  repeating-conic-gradient(#000 0 12.5%, #fff 0 25%) 
  0 / 100px 100px;

If you compare the CSS for the two demos we’ve seen so far, you’ll see that all I did was divide the color stops in half, 25% to 12.5% and 50% to 25%.

Another one? Let’s go!

This time I’m working with CSS variables. I like this because variables make it infinitely easier to configure the gradients by updating a few values without actually touching the syntax. The calculation is a little more complex this time around, as it relies on trigonometric functions to get accurate values.

I know what you are thinking: Trigonometry? That sounds hard. That is certainly true, particularly if you’re new to CSS gradients. A good way to visualize the pattern is to disable the repetition using the no-repeat value. This isolates the pattern to one instance so that you clearly see what’s getting repeated. The following example declares background-image without a background-size so you can see the tile that repeats and better understand each gradient:

I want to avoid a step-by-step tutorial for each and every example we’re covering so that I can share lots more examples without getting lost in the weeds. Instead, I’ll point you to three articles you can refer to that get into those weeds and allow you to pick apart our examples.

How to create background patterns using CSS & conic-gradient (Verpex blog)
Learn CSS radial-gradient by Building Background Patterns (freeCodeCamp)
Background Patterns, Simplified by Conic Gradients (Ana Tudor)

I’ll also encourage you to open my online collection of patterns for even more examples. Most of the examples are made with multiple gradients, but there are plenty that use only one. The goal of this article is to learn a few “single gradient” tricks — but the ultimate goal is to be able to combine as many gradients as possible to create cool stuff!

Grid lines

Let’s start with the following example:

You might claim that this belongs under “Patterns” — and you are right! But let’s make it more flexible by adding variables for controlling the thickness and the total number of cells. In other words, let’s create a grid!

.grid-lines {
  --n: 3; /* number of rows */
  --m: 5; /* number of columns */
  --s: 80px; /* control the size of the grid */
  --t: 2px; /* the thickness */

  width: calc(var(--m)*var(--s) + var(--t));
  height: calc(var(--n)*var(--s) + var(--t));
  background:  
    conic-gradient(from 90deg at var(--t) var(--t), #0000 25%, #000 0)
      0 0/var(--s) var(--s);
}

First of all, let’s isolate the gradient to better understand the repetition (like we did in the previous section).

One repetition will give us a horizontal and a vertical line. The size of the gradient is controlled by the variable --s, so we define the width and height as a multiplier to get as many lines as we want to establish the grid pattern.

What’s with “+ var(--t)” in the equation?

The grid winds up like this without it:

We are missing lines at the right and the bottom which is logical considering the gradient we are using. To fix this, the gradient needs to be repeated one more time, but not at full size. For this reason, we are adding the thickness to the equation to have enough space for the extra repetition and the get the missing lines.

And what about a responsive configuration where the number of columns depends on the available space? We remove the --m variable and define the width like this:

width: calc(round(down, 100%, var(--s)) + var(--t));

Instead of multiplying things, we use the round() function to tell the browser to make the element full width and round the value to be a multiple of --s. In other words, the browser will find the multiplier for us!

Resize the below and see how the grid behaves:

In the future, we will also be able to do this with the calc-size() function:

width: calc-size(auto, round(down, size, var(--s)) + var(--t));

Using calc-size() is essentially the same as the last example, but instead of using 100% we consider auto to be the width value. It’s still early to adopt such syntax. You can test the result in the latest version of Chrome at the time of this writing:

Dashed lines

Let’s try something different: vertical (or horizontal) dashed lines where we can control everything.

.dashed-lines {
  --t: 2px;  /* thickness of the lines */
  --g: 50px; /* gap between lines */
  --s: 12px; /* size of the dashes */
  
  background:
    conic-gradient(at var(--t) 50%, #0000 75%, #000 0)
    var(--g)/calc(var(--g) + var(--t)) var(--s);
}

Can you figure out how it works? Here is a figure with hints:

Outline of a rectangle with dashed green borders. Variables for t, g, and s are labeled.

Try creating the horizontal version on your own. Here’s a demo that shows how I tackled it, but give it a try before peeking at it.

What about a grid with dashed lines — is that possible?

Yes, but using two gradients instead of one. The code is published over at my collection of CSS shapes. And yes, the responsive behavior is there as well!

Rainbow gradient

How would you create the following gradient in CSS?

You might start by picking as many color values along the rainbow as you can, then chaining them in a linear-gradient:

linear-gradient(90deg, red, yellow, green, /* etc. */, red);

Good idea, but it won’t get you all the way there. Plus, it requires you to juggle color stops and fuss with them until you get things just right.

There is a simpler solution. We can accomplish this with just one color!

background: linear-gradient(90deg in hsl longer hue, red 0 0);

I know, the syntax looks strange if you’re seeing the new color interpolation for the first time.

If I only declare this:

background: linear-gradient(90deg, red, red); /* or (90deg, red 0 0) */

…the browser creates a gradient that goes from red to red… red everywhere! When we set this “in hsl“, we’re changing the color space used for the interpolation between the colors:

background: linear-gradient(90deg in hsl, red, red);

Now, the browser will create a gradient that goes from red to red… this time using the HSL color space rather than the default RGB color space. Nothing changes visually… still see red everywhere.

The longer hue bit is what’s interesting. When we’re in the HSL color space, the hue channel’s value is an angle unit (e.g., 25deg). You can see the HSL color space as a circle where the angle defines the position of the color within that circle.

3D models of the RGB and HSL color spaces.

Since it’s a circle, we can move between two points using a “short” path or “long” path.

Showing the long and short ends of the hue in a color circle.

If we consider the same point (red in our case) it means that the “short” path contains only red and the “long” path runs into all the colors as it traverses the color space.

Adam Argyle published a very detailed guide on high-definition colors in CSS. I recommend reading it because you will find all the features we’re covering (this section in particular) to get more context on how everything comes together.

We can use the same technique to create a color wheel using a conic-gradient:

background: conic-gradient(in hsl longer hue,red 0 0);

And while we are on the topic of CSS colors, I shared another fun trick that allows you to define an array of color values… yes, in CSS! And it only uses a single gradient as well.

Hover effects

Let’s do another exercise, this time working with hover effects. We tend to rely on pseudo-elements and extra elements when it comes to things like applying underlines and overlays on hover, and we tend to forget that gradients are equally, if not more, effective for getting the job done.

Case in point. Let’s use a single gradient to form an underline that slides on hover:

h3 {
  background: 
    linear-gradient(#1095c1 0 0) no-repeat
    var(--p,0) 100%/var(--p, 0) .1em;
  transition: 0.4s, background-position 0s;
}

h3:hover {
  --p: 100%;
}

You likely would have used a pseudo-element for this, right? I think that’s probably how most people would approach it. It’s a viable solution but I find that using a gradient instead results in cleaner, more concise CSS.

You might be interested in another article I wrote for CSS-Tricks where I use the same technique to create a wide variety of cool hover effects.

CSS shapes

Creating shapes with gradients is my favorite thing to do in CSS. I’ve been doing it for what feels like forever and love it so much that I published a “Modern Guide for Making CSS Shapes” over at Smashing Magazine earlier this year. I hope you check it out not only to learn more tricks but to see just how many shapes we can create with such a small amount of code — many that rely only on a single CSS gradient.

Some of my favorites include zig-zag borders:

…and “scooped” corners:

…as well as sparkles:

…and common icons like the plus sign:

I won’t get into the details of creating these shapes to avoid making this article long and boring. R ead the guide and visit my CSS Shape collection and you’ll have everything you need to make these, and more!

Border image tricks

Let’s do one more before we put a cap on this. Earlier this year, I discovered how awesome the CSS border-image property is for creating different kinds of decorations and shapes. And guess what? border-image limits us to using just one gradient, so we are obliged to follow that restriction.

Again, just one gradient and we get a bunch of fun results. I’ll drop in my favorites like I did in the last section. Starting with a gradient overlay:

We can use this technique for a full-width background:

…as well as heading dividers:

…and even ribbons:

All of these have traditionally required hacks, magic numbers, and other workarounds. It’s awesome to see modern CSS making things more effortless. Go read my article on this topic to find all the interesting stuff you can make using border-image.

Wrapping up

I hope you enjoyed this collection of “single-gradient” tricks. Most folks I know tend to use gradients to create, well, gradients. But as we’ve seen, they are more powerful and can be used for lots of other things, like drawing shapes.

I like to add a reminder at the end of an article like this that the goal is not to restrict yourself to using one gradient. You can use more! The goal is to get a better handle on how gradients work and push them in interesting ways — that, in turn, makes us better at writing CSS. So, go forth and experiment — I’d love to see what you make!

CSS Tricks That Use Only One Gradient originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

from CSS-Tricks https://ift.tt/upZhgGI
Gain $200 in a week
via Read more

October 11, 2024

Using Multimodal AI Models For Your Applications (Part 3)

In this third and final part of a three-part series, we’re taking a more streamlined approach to an application that supports vision-language (VLM) and text-to-speech (TTS). This time, we’ll use different models that are designed for all three modalities — images or videos, text, and audio( including speech-to-text) — in one model. These “any-to-any” models make things easier by allowing us to avoid switching between models.

Specifically, we’ll focus on two powerful models: Reka and Gemini 1.5 Pro.

Both models take things to the next level compared to the tools we used earlier. They eliminate the need for separate speech recognition models, providing a unified solution for multimodal tasks. With this in mind, our goal in this article is to explore how Reka and Gemini simplify building advanced applications that handle images, text, and audio all at once.

Overview Of Multimodal AI Models

The architecture of multimodal models has evolved to enable seamless handling of various inputs, including text, images, and audio, among others. Traditional models often require separate components for each modality, but recent advancements in “any-to-any” models like Next-GPT or 4M allow developers to build systems that process multiple modalities within a unified architecture.

Gato, for instance, utilizes a 1.2 billion parameter decoder-only transformer architecture with 24 layers, embedding sizes of 2048 and a hidden size of 8196 in its feed-forward layers. This structure is optimized for general tasks across various inputs, but it still relies on extensive task-specific fine-tuning.

GPT-4o, on the other hand, takes a different approach with training on multiple media types within a single architecture. This means it’s a single model trained to handle a variety of inputs (e.g., text, images, code) without the need for separate systems for each. This training method allows for smoother task-switching and better generalization across tasks.

Similarly, CoDi employs a multistage training scheme to handle a linear number of tasks while supporting input-output combinations across different modalities. CoDi’s architecture builds a shared multimodal space, enabling synchronized generation for intertwined modalities like video and audio, making it ideal for more dynamic multimedia tasks.

Most “any-to-any” models, including the ones we’ve discussed, rely on a few key concepts to handle different tasks and inputs smoothly:

Shared representation space
These models convert different types of inputs — text, images, audio — into a common feature space. Text is encoded into vectors, images into feature maps, and audio into spectrograms or embeddings. This shared space allows the model to process various inputs in a unified way.
Attention mechanisms
Attention layers help the model focus on the most relevant parts of each input, whether it’s understanding the text, generating captions from images, or interpreting audio.
Cross-modal interaction
In many models, inputs from one modality (e.g., text) can guide the generation or interpretation of another modality (e.g., images), allowing for more integrated and cohesive outputs.
Pre-training and fine-tuning
Models are typically pre-trained on large datasets across different types of data and then fine-tuned for specific tasks, enhancing their performance in real-world applications.

Reka Models

Reka is an AI research company that helps developers build powerful applications by offering models for a range of tasks. These tasks include generating text from videos and images, translating speech, and answering complex questions from long multimodal documents. Reka’s models can even write and execute code, providing flexible, real-world solutions for developers.

These are the three main models Reka offers:

Reka Core
A 67-billion-parameter multimodal language model designed for complex tasks. It supports inputs like images, videos, and texts while excelling in advanced reasoning and coding.
Reka Flash
A faster model with a 21-billion-parameter, designed for flexibility and rapid performance in multimodal settings.
Reka Edge (PDF)
A smaller 7-billion-parameter model was built for on-device and low-latency applications, making it efficient for local use and local or latency-sensitive applications.

Reka’s models can be fine-tuned and deployed securely, whether on the cloud, on-premises, or even on-device. Let’s start by testing Reka’s capabilities directly through its playground. This allows us to experiment with its multimodal features without writing any code, providing a hands-on way to see how the models handle various tasks, such as image and video comprehension.

Alright, we’ll kick things off by uploading an image of a diagram outline of the PaliGemma architecture and ask Reka for a detailed explanation.

Can you provide a more detailed explanation of this image?

Here’s what we get from Reka Core:

“This image is a schematic representation of a machine-learning model named PaliGemma. The model appears to be designed for multimodal input, combining both image and text data. At the top, there are two input sources: ‘Image Input’ and ‘Text Input’. The image input is processed by a ‘SigLIP Image Encoder’, which likely stands for a specific type of image encoding technique. The output of this encoder is then subjected to a ‘Linear Projection’, which is a common step in machine learning to transform data into a lower-dimensional space. The text input is directly fed into the model. Both the projected image data and the text input are then concatenated into ‘Concatenated Tokens’, which are then processed by a component labeled ‘Gemma’. The final output of the model is ‘Text Output’, which suggests that the model is designed to generate text based on the input data.”

It’s a clear and detailed breakdown of the PaliGemma architecture. The model accurately identifies image and text inputs, the SigLIP image encoder, and the linear projection step. It also grasps how the image and text inputs are combined and processed to generate text output. I should admit that the response is quite neat, offering a solid explanation of the architecture.

Let’s try a video input instead. We’ll upload the video about Genny, a software, and ask a question to see how well Reka Core handles video comprehension.

What is this video about?

“This video is a screen recording of a group of friends discussing their plans for the weekend.”

Well, it’s not a good answer compared to what LLaVA gave us in the previous article. Now let’s try a longer video, but with the Reka Flash model. The video is about a TTS model called Parler TTS. Instead of asking what the video is about, let’s prompt it like this:

I’m an AI developer, and I’m not sure how this TTS model can help me in my projects. Can you explain how I can use it or what it’s useful for?

Reka Flash generates a solid answer this time:

“Of course! This TTS (Text-to-Speech) model can be incredibly useful for developers, especially those working on projects that involve creating more human-like interactions or providing audio feedback to users. Here are some ways you can leverage this TTS model in your projects:

Accessibility: TTS models can greatly enhance the accessibility of your applications for users with visual impairments or reading difficulties. By providing spoken feedback or narrating content, you can make your applications more inclusive
Voice Assistants: You can integrate this TTS model into voice assistants or chatbots, allowing them to generate more natural-sounding responses. This can improve user experience and make interactions with your bots more engaging.
Multimedia Applications: This TTS model can be used in multimedia applications, such as e-books, educational tools, or games, to provide spoken narration or instructions. This can make the content more engaging and easier to understand.
Audio Notifications: You can use the TTS model to generate audio notifications for your applications, providing users with spoken alerts or reminders. This can be particularly useful for users who may not always have their screens visible.
Language Learning: The TTS model can be used in language learning applications to provide users with correct pronunciation and intonation. It can also generate spoken feedback or narrate lessons, making the learning process more immersive.
Audio Books: You can use the TTS model to generate audio books, allowing users to listen to written content instead of reading it. This can be especially helpful for users who prefer auditory learning or have difficulty reading.
Explainer Videos: The TTS model can be used to generate voiceovers for explainer videos, providing users with spoken narration that explains the content on the screen. This can make the content more engaging and easier to understand.
Audio Feedback: You can use the TTS model to generate audio feedback for users in your applications, such as confirming actions, providing instructions, or giving feedback on their performance. This can make the interactions more natural and intuitive.
In summary, the TTS model can be a valuable tool for developers looking to create more human-like interactions, improve accessibility, and enhance the user experience in various applications.”

It’s a good answer that’s informative and quite practical for developers. Let’s compare what happens when we try the Reka Edge model with a PDF input titled “Meta AI — Responsible Use Guide” (PDF).

As an AI developer, how can I ensure that I am following the responsible AI guidelines outlined in this document?

“To ensure that your use of AI aligns with the principles outlined in this guide, you can follow these steps and best practices:
Familiarize yourself with the principles of responsible AI, such as transparency, accountability, and user empowerment, as outlined in the guide.
Understand the potential impacts of AI on users and society, and be aware of the risks and challenges associated with the development and deployment of AI systems.
Embrace an iterative model-development mindset, continuously striving for improvement and learning from feedback and errors.
Build a responsible AI ecosystem by working with partners, experts, and communities to develop and share best practices, tools, and benchmarking resources.
Follow the guidelines and best practices outlined in the guide for each stage of model development, from data collection and preparation to fine-tuning, evaluation, and deployment.
Consider the specific use case and requirements for your AI system, and tailor your approach accordingly.
Regularly monitor and evaluate the performance and safety of your AI system and make adjustments as needed to ensure it aligns with the principles outlined in the guide.
Be transparent and accountable in your interactions with users and stakeholders, and be open to feedback and suggestions for improvement.
Stay informed about the latest developments and research in the field of AI, and be prepared to adapt your approach as needed to address new challenges and opportunities.
Follow the specific guidelines and best practices outlined in the addendum for Code Llama, such as defining content policies, evaluating and benchmarking models, and addressing input- and output-level risks.”

Reka Edge’s answer is quite thorough and detailed, too!

If you want to dive into coding, start by creating a Reka account and getting an API key. Then you can follow along with this notebook. Try out their Python SDK, and make sure to explore the different models available. It’s a great way to see how these tools work under the hood!

Gemini Models

Gemini 1.5, developed by Google DeepMind, is designed to handle complex tasks efficiently, thanks to the new Mixture-of-Experts (MoE) system. MoE is like packing several specialized models inside one big model. Instead of using the whole network for every task, Gemini 1.5 activates only the parts (or what they call “experts”) that are most relevant. This means Gemini 1.5 can tackle complex tasks with less processing power than a typical monolithic model.

We can explore Gemini’s features in Google AI Studio since it’s already baked right in. We’ll begin by uploading the following image illustrating VLM capabilities.

We’ll ask Gemini to analyze the image and extract details or concepts:

Explain this image. What are the specific details or concepts it represents?

“The image is a flowchart illustrating different types of image understanding tasks with a Vision Language Model.
Object Localization: This task aims to identify the precise location of objects within an image. The example question asks, “Is one cat behind another?”
Zero-shot Segmentation: This task involves segmenting an image into different regions based on a given label, even if the model has never seen that specific label before. The example question asks to segment “striped cat.”
Zero-shot Visual QA: This task requires answering questions about an image, even if the model has not been specifically trained to answer that type of question. The example question asks, “What is the breed of these cats?”
One-shot Learning with Instructions: This task involves providing the model with a single example and instruction to learn a new concept and apply it to other images. The example question asks, “Striped cats are called tabby cats. What is the breed of the cats in the image?”

Well, Gemini nailed it — it clearly understood the image and recognized the tasks a VLM handles. This is exactly what you’d expect from a model designed for advanced image analysis.

Now, we’ll upload another image — this time of an Italian dish — and ask Gemini if it can recognize the dishes and list the ingredients needed for them. This type of “food recognition task” will help us test its ability to identify foods and ingredients.

List the different dishes in this image, also from which country, and give me the ingredients I need to make them.

“The image shows an Italian feast with the following dishes:
Seafood Stew: A rich and flavorful stew with seafood like clams, mussels, shrimp, fish, and vegetables in a tomato broth.
Spaghetti with Tomato Sauce: Classic spaghetti pasta tossed in a simple yet flavorful tomato sauce.
Meatballs in Tomato Sauce: Tender and juicy meatballs simmered in a rich tomato sauce.
Lasagna: Layered pasta with meat sauce, cheese, and tomato sauce.
Side Salad: A refreshing side salad with mixed greens, tomatoes, and other vegetables.
Garlic Bread: Toasted bread slices rubbed with garlic and olive oil.
Marinara Sauce: A simple tomato-based sauce.
This is a typical Italian meal with various dishes showcasing the flavors of Italian cuisine.

As for the ingredients, you’ll need tomatoes for many of these dishes, specifically for the sauces and the side salad.”

Well, the model did a good job recognizing the dishes, but it also didn’t give me all the necessary ingredients. Let’s see how it does with videos instead, using the same video we used earlier with the Reka models. This time, the task will focus on action recognition.

What is the purpose of this video, and what key actions or processes are being demonstrated?

“The video is a tutorial about the importance of friendship and how it can impact our lives. It demonstrates the use of a video editing software called “Genmy” to create a video and add text subtitles. The video creator is using Genmy to:
Record their voice: This is seen at the top of the screen with the mic icon.
Add text to speech: You see the “Text to Speech” option, which is likely being used to generate subtitles or captions for the video.
Edit the timeline: They’re working with a video timeline, adding and arranging different elements.
Add voice-over: The speaker is adding commentary to the video.
Create a visually appealing presentation: They’re using a combination of video footage, text, and voice-over to create an engaging tutorial.”

Well, Gemini gave a clear breakdown of the video, identifying it as a tutorial demonstrating the Genmy video editing software to highlight how it’s used for recording voice, adding text-to-speech, editing video timelines, and allowing voice-over. Impressive!

Let’s upload one more video, the same one we used for Reka about the Parler TTS model, and ask Gemini to analyze and summarize the contents.

Summarize this video and explain how the contents might be relevant or helpful for software engineers.

“This video showcases different voice samples generated by a text-to-speech (TTS) system called “Parler-TTS.” The video highlights various voice characteristics like gender, pace, pitch, and even the simulated environment. For software engineers, this video demonstrates the progress made in TTS technology. These are some insights:
Voice Variety: The video shows that Parler-TTS can create diverse voices, potentially useful for applications needing different personas or tones.
Fine-grained Control: The video emphasizes the ability to control voice parameters like pace and pitch, showcasing the potential for customizability.
Quality and Naturalness: The video focuses on the quality of the generated speech, demonstrating the advancements made in speech synthesis, which is crucial for user experience.”

Nicely done! I can go with that answer. Gemini explains adjusting voice settings, like pitch and speed, and how having different voices can be useful. Gemini also emphasizes the importance of natural, high-quality speech, which is handy for developers working with TTS systems!

Alright, for coding, you can grab the code from Google AI Studio by clicking the Get Code button. You can choose between formatting the code in Python, Swift, and Java, among other languages.

Conclusion

Both Reka and Gemini are strong multimodal models for AI applications, but there are key differences between them to consider. Here’s a table that breaks those down:

Feature	Reka	Gemini 1.5
Multimodal Capabilities	Image, video, and text processing	Image, video, text, with extended token context
Efficiency	Optimized for multimodal tasks	Built with MoE for efficiency
Context Window	Standard token window	Up to two million tokens (with Flash variant)
Architecture	Focused on multimodal task flow	MoE improves specialization
Training/Serving	High performance with efficient model switching	More efficient training with MoE architecture
Deployment	Supports on-device deployment	Primarily cloud-based, with Vertex AI integration
Use Cases	Interactive apps, edge deployment	Suited for large-scale, long-context applications
Languages Supported	Multiple languages	Supports many languages with long context windows

Reka stands out for on-device deployment, which is super useful for apps requiring offline capabilities or low-latency processing.

On the other hand, Gemini 1.5 Pro shines with its long context windows, making it a great option for handling large documents or complex queries in the cloud.

October 11, 2024

30+ Key Logo Design Trends for 2025

Need a new logo? Whether you’re starting from scratch or just planning a tweak to a current mark, understanding shifts in logo design trends can help you create a design with a modern touch.

The theme in logo design is to create something simple and distinctive. With so many new websites and brands and companies coming online almost every day, it’s no wonder that logos are trending toward designs that stand out.

Here’s a look at a few logo design trends, and how you can make them work for you (and while you’re at it, be sure to look through our full guide on how to design a logo!)

Bold Minimalism

One of the key logo design trends that’s been growing in popularity is the bold minimalist logo designs. Over the past couple of years, we saw many brands transition from colorful, creative logos with shapes and intricate details into extremely minimalist designs. And this trend doesn’t appear to be going away anytime soon.

In 2024, we saw several brands adopt this new bold minimalist logo design trend as well. The new Lamborghini and PayPal logos were the most noticeable of them all. Lamborghini switched to a highly minimalist logo after 20 years, ditching its iconic gold-colored symbol. PayPal also removed all of its colors and replaced the instantly recognizable lettermark with a more simplistic design. We will likely see more brand follow this trend in the coming months.

Here’s how to make the most out of this logo design trend:

Use fewer colors, shapes, and details in your designs
Utilize thin lines and geometric shapes
Use simple typography with fewer decorative elements

Responsive Logos

One of the main reasons why brands have been adopting the bold minimalism trend is to make their logos responsive and flexible. Unlike the good old days, logos now need to be dynamic enough to be displayed flawlessly across multiple platforms and mediums, including the many different sizes of device screens.

Crafting responsive logos is the answer to this process as it allows brands to create multiple variations of their logos for different platforms. As a result, every reputable and popular brand now has responsive logo designs.

This is a trend that you should study carefully as it will be an important part of your future logo design projects. From now on, every logo you design will need to be responsive!

Here’s how to make the most out of this logo design trend:

Craft minimal logos that can be easily displayed across different platforms
Design multiple variants of a logo suitable for each platform
Design with scalability in mind

Negative Space Designs

The negative space logo design is nothing new. They have been around for decades. But it seems the trend is resurfacing in a new way.

More than a few of the recent logo remakes featured negative space designs. The new Reddit and Bolt logos are the most noticeable pair in the bunch. Many other brands like Propel and Indiana also switched from classic logo designs to more minimal logos with negative space elements.

Negative space logos spark creativity and offer a refreshingly unique look for brands. So this is a logo trend we’re excited to see grow throughout this year.

How to make the most out of this logo design trend:

Find clever ways to use negative space to create symbols and shapes
Use fonts that with dynamic letterforms

Chaotic Typography

If the text on a design is unreadable, we usually consider it a bad design. But that seems to be changing. This latest logo design trend utilizes chaotic, edgy, and basically unreadable text to create a bold look for brands.

The example above comes from a reputable design studio that has designed the chaotic logo for a fashion brand called Queen of Chaos, which specializes in designing uniquely weird apparel for celebrities like Lady Gaga.

This chaotic typography logo approach would fit perfectly well for brands and companies that seek to create an edgy look.

How to make the most out of this logo design trend:

Go crazy with typography and add your own decorative elements
Use weird and edgy-looking fonts
Use your imagination!

Illustrative Logos

Even though most of the latest trends are all about minimalism and simplicity, we always love to see logos with intricate details and stylish designs. This new logo trend will keep that trend alive and strong for a long time.

It’s great seeing illustrative logos making a comeback. These logos see more complex designs that feature detailed illustrations. They also use creative design trends such as Art Deco and vintage geometric designs to make each logo look much more attractive.

This logo trend is quite popular among luxury and high-end brands, especially in hotel, jewelry, and fashion brands.

Here’s how to make the most out of this logo design trend:

Incorporate your line art illustrations into your logo designs
Use thin lines, shapes, and outline fonts
Utilize gold, black, silver, and other colors to give a luxury vibe to the logo

Dark Color Tones

Dark color schemes are making a comeback! There have been many different logo design trends over the past few years with different styles of color themes like flat colors, pastel colors, material design, and more. And we’ve circled back to dark and bright colors once again.

In 2023, we saw several different brands redesigning their logos by changing the color tones. The most notable logo redesign came from Facebook. The company casually changed the color by making the blue color much darker. It was a subtle change but very noticeable.

Pepsi also made rounds in the news with its unexpected brand redesign. Their iconic light blue color was replaced with a much darker blue and with a brighter red. This new redesign came 15 years after its last branding change.

Here’s how to make the most out of this logo design trend:

Consider adjusting the tone of your logo’s existing color
Use darker color tones in your logo designs
Be mindful of the color combinations

Retro 3D Look

If there’s one logo design trend we can never get tired of it’s classic retro designs. While some brands rushed to redesign their logos with modern looks in 2023, we saw several companies take the opposite approach with their logo redesigns.

7Up’s brand-new retro-themed logo redesign was the most noteworthy one to follow this new trend. It featured a classic retro look with elaborate 3D-like lines that highlighted the logo in an entirely new way.

Several other brands also followed this trend, including the iconic Jell-O. The outdated logo was replaced with a retro 3D look.

This new retro 3D logo trend was mostly adopted by much older brands that have been around for many decades. It is the perfect way to evoke emotions through nostalgia.

Here’s how to make the most out of this logo design trend:

Consider using retro color palettes. Find inspiration from classic logo designs from the 1960s and 70s
Add elaborate 3D looks to text and objects
Aim to make logos look more fun with a bit of nostalgia

Single Color Logo Design

The multicolor logo designs appear to be slowly fading away. Except for a few brands, like Google and eBay, many brands are now switching over to single-color logo designs. Even Google has replaced its multicolor logo with a single-color logo on the dark theme version of the homepage.

Channel 4 replaced its multicolor logo with a single-colored logo design in 2023. Several other brands also adopted this new trend in 2023. Including Wise ( previously Transferwise), Fanta, and Minute Maid.

We can expect to see more brands following this trend this year to replace multicolor logos with single-color designs.

Here’s how to make the most out of this logo design trend:

Replace your color palette with a single color that represents the brand
Use brighter or darker color tones to make the logo stand out

Edgy Typographic Logos

While retro logo designs look cool, it’s not suitable for all types of brands. Especially for tech-related brands, going for a cool and edgy look is the ideal approach. At least that was the case for several tech brands that rebranded with new edgy typography logo designs in 2023.

The X (previously Twitter) logo redesign was the most notable one from the bunch. Following Elon Musk’s acquisition, X’s rebranding of Twitter was quite a radical change. And it saw the cute Twitter bird logo being replaced with a more edgy monogram-style typographic logo.

Nokia also introduced a brand redesign featuring an edgy typographic logo with a very stylish look. We’ll probably see more tech brands following this trend this year as well.

Here’s how to make the most out of this logo design trend:

Experiment with edgy and futuristic fonts
Think outside the box and try removing parts of letters to achieve a unique look

Psychedelic Vibes

Typographic logos with psychedelic designs have been trending for a while. We saw a rise in this trend in the past year and it will surely be adopted by more brands this year. And we’re not complaining.

Psychedelic logo designs take inspiration from classic trippy text designs from the 1960s and the 70s. They add a fun and funky look to logo designs to make brands look much more casual and human.

Here’s how to make the most out of this logo design trend:

Use fonts with funky and psychedelic designs
Manipulate letters to make them look more squiggly and trippy
Use retro color palettes with either soft or dark colors

Classic Cartoony Mascots

When it comes to mascot logos, nothing beats the classic vintage mascots from the 1930s brands. Those old cartoony mascot logos still look perfect for many different types of brands. And it’s probably why the trend appears to be making a comeback.

Vintage mascot logos are appropriate for various types of brands from food brands to coffee shops, restaurants, and especially for product packaging. They always immediately stand out from the crowd as well.

Here’s how to make the most out of this logo design trend:

Consider designing the mascot themed around a product of the brand
Find inspiration from classic mascots from the 1930s
Use vintage fonts for typography

Liquid Blobs

Liquid-style logos often fit perfectly with food and drink brands. However, we’ve been seeing various alternate styles of this trend being used by other types of brands as well.

Liquid-like text and blob-like shapes are the key features of this logo design trend and it perfectly serves a brand that focuses on making a casual and friendly appearance.

When used properly, this trend is also suitable for travel and nature-themed brands.

Here’s how to make the most out of this logo design trend:

Use fonts with liquid-style letter designs. Blob, bubble, and psychedelic fonts are ideal
Try to incorporate liquid or blob-style shapes or backdrops to logo icons

Circle Icons

Circles are always a trending element in logo design. There are so many nice qualities about a circle that make it a popular option from the shape and meanings to being able to create an icon that works anywhere.

Here, we are seeing more circle icons that can work with text elements or alone to highlight a logo and brand. The thing that stands out here is that text elements are not inside the circle.

Here’s how to make the most out of this logo design trend:

Create a circle icon that’s interesting and works well at a small or large size.
Consider line art, such as There’s More to Life, above.
Place text outside the circle for added flexibility.

Sideways Orientation

Switch up your brand or add an element of whimsy with a sideways orientation for a logo design.

Each of the examples here did it a different way, but all work well as part of this logo design trend. Dictionary of Online Behavior uses a logo design that seems to shrink away from you and isn’t straight-on, Echt uses a logotype that reads from bottom to top on one side, and Adidas Metaverse takes the traditional three-stripes logo and rotates it 90 degrees.

Each different variation is an option if you want to explore logo styles that have a sideways orientation.

Here’s how to make the most out of this logo design trend:

Play with type that rotates if you have short words. This can be a lot more tricky for longer brand names.
Turn a common mark sideways for an alternative brand style.
Consider a subtle twist; you don’t have to completely turn the logo.

Outlined Typefaces

Outline typefaces have been trending in all facets of graphic design for some time and are starting to show up in logos as well. Outlined typefaces can be interesting, help create contrast between text elements, and even provide a lighter feel for a logo.

On the other hand, outline styles can almost get lost if not weighted properly in context with the rest of the design, so it is important to use a typeface that can carry the logo.

Outlined typefaces can serve as the lettering for an entire logo, such as Shannon (above), or for part of the brand name, such as GolfSpace (above). Both options can look great and provide visual focus.

Here’s how to make the most out of this logo design trend:

Pick an outline font that has enough weight for the overall brand feel.
Use an outline font for a simple brand icon, such as Felipe Castro (above).
Consider the trendiness of this style. If outline fonts fade out of fashion, your logo could look dated and it’s not something you want to redesign regularly in most cases.

Exaggerated Spacing

In almost every industry, there’s a conversation around elements that disrupt and bring attention to different things. That’s what this logo design trend does. Exaggerated spacing – between words, between letters, or between lines of text – makes you look a little longer at the logo design.

There are pros and cons to this style of spacing. While it can look extremely interesting, it can be more difficult to read, putting a greater cognitive load on the user. The exaggerated spacing provides a certain feel that’s lighter but can take up more space for the overall logo. This style has a great deal of variability so you can make it your own, but it can be difficult to use with some other design elements because it is a powerful element on its own.

Use exaggerated spacing in a logo to help create a pause between words or phrases in the name, like a natural speech pattern. It can actually help convey meaning for your brand.

Here’s how to make the most out of this logo design trend:

Try to contain the text elements in a container so that they don’t get confused with other parts of the design.
Stick to a single typeface if you can to help hold it together.
Play with variations of spacing. Does it work better vertically or horizontally? Are the words or phrases understandable?

Custom or Experimental Typefaces

Custom or experimental typefaces can be a lot of fun and really show the personality of a brand, making them a popular – and trendy – design choice for logos.

What’s nice about these styles is that everything about your logo design will feel uniquely custom and yours. The downside is that they can take some time to develop. (But what brand doesn’t take some time to get off the ground?)

Here’s how to make the most out of this logo design trend:

Determine how custom you want your logo font to be. Do you want a truly custom typeface or is a more commercially-available experimental design viable?
Weigh the pros and cons of typeface features such as color or animation to determine what your needs are. A color font, for example, isn’t the best choice if you foresee needing a one-color logo regularly.
Ask for exclusivity if you are determined to have something that’s 100% yours and unique. You can come to an agreement with a type designer about licensing and usage rights.

Simple Logotypes

It’s hard to beat the innate beauty of a simple logotype. These logos use beautiful lettering to pull together brand identity and it’s something that we are seeing a lot more of.

You can almost think of a logotype as a gateway logo for a startup or new company. For many, this is the first envisioning of a brand mark and company name before the business gets truly established. Some of these logos last forever while others eventually evolve.

One of the reasons this trend is so popular may be because of the number of freelancers, entrepreneurs, and small businesses popping up everywhere.

Here’s how to make the most out of this logo design trend:

Don’t assume that a logotype is easier, cheaper, or faster to create than other types of logos. Working with just the right lettering can be a challenge.
Don’t get hung up on a font or style until you see it with your brand name in print. Some fonts look great and then fall flat due to certain character combinations. Type out the words you plan to use in the font style of your choosing as a starting point. If you hate it, move on.
The more elaborate the typeface, the less you need other embellishments. Aim for a logotype that represents the simplicity or complexity and mood and voice of your brand.

Logos That Look Like Buttons

Logos for website design can be a funny thing. One of the trends we are seeing is logos that have a button-style look. This includes square outlining or elements that look click- or tappable.

What’s nice about this trend from a usability perspective is that it further enhances the idea that the logo is a home button in the website design. (So, make sure that the logo does include a home click-action.)

The tricky part is to design a logo that still looks like a brand mark with the button style. You’ll want to use a different color or style of button throughout the design to differentiate the two.

Three ways to try it:

Use a ghost or outline style around your logo. This can create the idea of a button and allow the logo to stand on its own as well.
Use a button-like element with another text element for an almost yin and yang effect with contrasting styles in the logo design.
Use a graphic element, such as an icon, that represents something to click. The example above from Data Shield is a solid example with a “play” button next to the company name. It almost demands to be clicked.

Simplified Logos

All the big brands are doing it. And that’s when most big trends start to steamroll.

There’s a shift to simplify logos with easy-to-understand fonts with clean lines and simple imagery. (Or sometimes, no imagery at all.)

Many times, these logos are evolutions of previous versions that result in some simplification, but new designs can start with a simple outline as well.

Here’s how to make the most out of this logo design trend:

Pick a shape or color and stick to this theme.
Develop a design that feels true to your brand, and redesigns should carry the essence of the logo being redeveloped.
Don’t overthink it; simplicity is key.

Gradients

It seems like we just can’t get enough gradients in design projects. Logo design trends are no exception.

Like the trend above, this is another place where big brands are using gradient options in their logos. And while pinks, purples, and oranges are necessarily part of this trend, it is a popular color palette.

What’s nice about gradients is that they add depth to an image. It can be a little tricky with logo designs because of the variance in size for logo usage. The gradient choice has to look good at huge sizes – such as billboards – and for tiny sizes – such as phone app icons.

Design a gradient that’s interesting but not overwhelming to make the most of this trend.

Three ways to try it:

Layer different colors of gradients throughout the logo design for a more elaborate look.
Use a gradient pattern within thick lines to create visual interest.
Create more of a stacked gradient with an ombre effect, but using a monotone color palette.

Animated Logos

Animated logos are starting to become more of a website staple. Many brands are animating existing logos or creating newer, trendier animated options.

What’s great about an animated logo is that it makes you look. Think about common website patterns: There’s often a logo in the top left corner. Do you even look at it anymore?

Animated logos break up the monotony of this design pattern with a motion that almost forces you to look at the logo. It’s pretty smart when you think about it.

Here’s how to make the most of this trend:

Keep the animation simple. Too much movement can have the opposite of the intended effect if the logo is hard to read or understand.

Consider speed carefully. Quick animations can be dizzying; slow animations feel off; it takes a lot of practice to find the speed that’s just right.

Don’t forget to create your animated logos in color and one-color options.

Squares

The change in shape is natural. With so many circle logos – thanks to social media icon shapes – more logo designs are featuring distinctive squares.

The change in shape is simple. A square also fits inside a circle logo but looks different. It’s a subtle change that can make a brand or logo stand out.

Most designers are using squares in a way that stacks elements, such as a square icon or brand mark with typography next to or above it that creates more of a rectangle. When used in those circular icon shapes, the logo drops to just the icon element.

Ways to make it work for you:

Create modular elements that you can mix and match in the logo design.
Keep the overall element to a simple icon-style graphic. Overly complex pieces can be tough to break apart or read at small sizes.
Don’t forget lettering. It’s easy to create a cool square element, but you need a brand identifier to really make it work in the long run.

Clean Lines

Clean lines and geometric patterns can create classic logos that work practically anywhere. There’s a great deal of flexibility in this trending style, which is one reason that it’s so popular.

Clean lines give this logo variation a classic feel, unlike some of the hand-drawn styles that have trended in the past. These logos are simple and elegant and the concept can be combined with other design trends as well. (Just look back to the Instagram logo, it features gradients and clean lines.)

How to make clean line logos work for you:

Keep imagery and lettering separated. Overlapping can end up making both design elements hard to read.
Choose a typeface with a similar stroke width as the line drawing to create harmonious consistency.
Don’t be afraid of color. While many line styles, feature one color, you can have more fun and stretch the palette somewhat.

Small Serif Logotypes

A logo doesn’t have to be complicated to be elegant and effective. More brands are turning to small serif logotypes to portray who they are.

When we refer to small serifs, it’s less about the font size and more about the size of strokes used within the type family. This trend is exemplified by characters that include tiny serifs. They are simple, light, and almost fall into the background of the lettering.

These serifs might be sharp or rounder and as with any logotype are a contributing factor in how the brand should feel to users.

Small serifs can be a great option because:

They are different. With so many sans serif logotypes out there, this style immediately stands out.
Serifs communicate a little more about a brand without imagery. These divots can establish mood and feel in a logotype where no other “art” is used.
These typefaces are interesting without being hard to read. While simple minimalism has been a trend for a while, there’s a movement toward somewhat more complex design elements.

Overlapping Elements

It’s one of those design rules that you don’t expect to be broken with small elements such as logos. But designers are breaking this rule … and it works.

From big brands like PayPal to smaller studios such as Moxy and Oust, logo designs are using elements that stack and overlap to create depth and visual interest. Overlapping styles tend to work best for logos that have a simple mark or lettering and that are contained to s specific part of the logo.

PayPal, for example, uses an overlapped letter for its iconic “P” but the word “PayPal does not use this treatment.

How do you use overlapping logo elements?

Pick one element to overlap; too much overlapping can get difficult to understand.
Use an overlapping element to create depth. Think about what the design technique does for an understanding of the mark.
Use color. This trending technique is made for high-color designs. (You might even consider an overprint style.)

Intricate Details

This logo design trend is a fresh take on visual elements after such a long period of minimalism – logos with intricate details.

From line-style logos has come an extension to more detailed logos with plenty of varying lines, color variations, type choices, and plenty of small elements that bring it all together.

This logo style can be a lot of work to create, but the result can be pretty amazing and creates a piece of art that is more than a logo. A great intricate design can be used everywhere at any size and maintains that same level of interest.

These designs beg users to look and then continue to engage with the design, trying to see every hidden stroke and meaning of the brand mark.

Here’s how you use the intricate detail logo design trend:

Take care with color. Too much color in an intricate style can get overwhelming quickly.
Make every detail count. The design should not be complicated because it can; it should be complex and intricate because it should be.
Pair simple typefaces with complicated artwork for readable balance.

Lowercase Lettering

These logos would make e.e. cummings proud. The style features great typography in all lowercase characters.

With so many designers focusing on typography for their projects, the shift to a type-based logo isn’t that far-fetched. Using all lowercase letters is a little more unusual and can be an attention-grabbing solution.

The catch is whether this use of your brand or company name meets visual standards and usage.

Here’s how to make it work for you:

Use a beautiful typeface. Any old sans-serif won’t do here.
Amp up the contrast between letters and the background to ensure that the smaller stance is seen.
Take care with readability. Is the word clear in all lowercase letters?
Opt for a heavier weight. Lowercase letters have a little less heft and presence than title or uppercase options. Create that balance with a thicker stroke weight.
Give it plenty of room. Whitespace can add weight and visual interest to a simple lowercase logotype.
Try it with short and simple words. Too many letters or words without capitals can get a little cumbersome in terms of readability.
Don’t crowd it with other elements. Lowercase lettering is the design trick with this logo style. Avoid other effects to maximize its impact.

Simple Shapes and Lines

The use of geometric shapes and lines is another popular trend for design projects overall that’s rapidly becoming a logo staple. With clean lines, simple shapes, and splashes of color, geometry is a logo must.

It’s important to note that many of these shapes are simple and fit into a square or circle format with uniform (or close to it) heights and widths. This initiative could be in part due to the need to have such a shape for common online mediums and logo usage, such as social media profiles.

Tips to make the most of the logo trend:

Don’t overthink it. A bold line or stroke can make simple lettering pop.
If you love the idea of a simple shape or geometry, but can’t quite make it work for the main logo, consider this treatment as a secondary option.
Give purpose to divots and shapes so that they frame or accent lettering, just dropping elements around a word isn’t quite enough to be effective.

Flat Design

Flat design remains a popular logo option because it is so easy to work with. While flat design as a whole is beginning to recede from the trends radar, logos are still using flat treatment.

Flat logos remain trendy because of how they are used. Many design projects feature full-screen video or images, particularly in website design, in full color. Flat logos often rest on a foreground layer and need to have some separation from the background.

Even brands that have more ornate logos often create a secondary, flat-style logo for this kind of use.

Going flat? Get the best result with these tips:

Use one (or just a few) colors in the design. Black or white options are the most popular.
Stick to simple typography that matches an icon or visual element in the logo.
Remember the basics of flat design and don’t feel tempted to add design techniques; simple is better if you want a logo that’s truly flat.
Consider a combination of a visual divot and text to tie the logo together.
Don’t overthink it. Often there’s not a lot of substance to a flat logo. The logo is often made to fall into the rest of the design.

Initials

LOL. OMG. SMH. It seems like the whole world talks in acronyms and initials these days. And logo design is no different.

While most commonly used for secondary logos, initials are everywhere. While there are three examples above, this collection could have easily included hundreds of designs with a three-letter (or less) logotype.

Most of these logos feature interesting or custom typography that’s designed to have a personal feel. The logo should speak right to the user and create an instant connection. The idea is further emphasized by the fact that the user needs to know what the letters actually mean (or have the desire to find out).

Here’s how you do it:

For designers or portfolio sites, use your initials to create a logotype that reflects your personality.
Add a simple animation to draw more interest to a logo that likely doesn’t carry a lot of visual weight in the design.
Consider boxing the letters to add more emphasis.
Acronyms and initials for logos are often secondary messaging and are subtle in placement and scale.

Circles

Circles are fluid and associated with energy, power, harmony, and infinity. And that’s why the shape is a trending logo design element.

Circles are also easy to plug into other places where a logo needs to appear, such as social media profiles, and in corner locations on printed designs, such as business cards or letterhead. Like many of the other elements that are trending in logo design, circles have become a more popular shape in website design overall in recent months.

Here are a few tips for using round logo shapes:

Don’t force it. Some words and elements just don’t fit into round shapes.
Match the meaning of your brand and the shape. Do the associations match?
Use a circle with a harmonious color palette to create a sense of balance between the logo and branding.
Don’t get stuck inside the shape; consider elements that break through the perfect roundness of the shape.
Opt for lettering that goes outside of the circle, particularly if words are long. (Short words are less of an issue.

One Color

Aside from black or white, logos with a single color a wildly popular.

While it’s not something that you would jump to design, these logos are classically beautiful with a simplicity that showcases the associated brands well. By chance or maybe as a color trend of its own, each of the examples above features a one-color logo style that uses a variant of orange.

Tips for designing a one-color logo:

Think of the design as colorless. Even with black and/or white and one color, use will be much like a true single-color logo.
With only one color, the meaning of that hue will speak volumes. Be mindful of color choice.
Don’t force too much color. A small swatch in a subtle location can have an impact.
Add color in a way that means something. Does it make your logo, brand, or product easier to understand?

Conclusion

Logo trends are interesting elements because, while what’s popular is always changing, logos are made to be constant. This creates an innate struggle for designers that are trying to create a logo that’s both modern and will withstand time. (It’s a pretty tall order.)

For the best chance at longevity, opt for a trend that includes some classic styling and is rooted in design theory. Design a logo that has a great aesthetic quality, is recognizable and readable and you’ll have the best chance at it lasting for years to come.