#Css simple wave background animation how to
#Css simple wave background animation code
#Css simple wave background animation free

Creating waves with SVGĬreating shapes like waves and other similar complex designs is arguably easier to do with SVG than CSS. Pseudo Elements CSS Wave by Saleh-Mubashar ( CodePen. We use the clip-path in the after element so the purple circle, as shown in the image above, does not exceed the rectangle’s height: Instead, we have a transform scale in the wave class that we can use to scale the wave up or down in the x and y directions.

#Css simple wave background animation code

For one, you don’t have to change any values within the code to manually adjust the height and width of the wave. There are a few important things to note here.

We’ll use the top property to move the ovals up and down and a border-radius to give them a circular shape: Ĭlip-path: ellipse(100% 15% at -15% 100%) We’ll give each an absolute position according to the image above, as well as a fixed height and width. Then, we’ll create two pseudo classes for the purple and red ovals. To create this type of wave effect in CSS, first, we’ll create a wave div that will have a relative position and a fixed height and width. If we make the purple oval black and the red oval white, our wave will be done! We can remove the excess purple part on top of the rectangle by using clip-path, which we’ll discuss later: The basic idea behind creating a wave shape is to create a rectangle element with an oval above and below it:Īs seen in the image below, by overlapping the two ovals on top of the rectangle, we can create the shape of a wave:

#Css simple wave background animation how to

In this article, we’ll learn how to create a few kinds of simple waves using both CSS and SVG, then implement them into an actual UI. Nowadays, wavy backgrounds are a popular trend in web design, however, the wave is a notoriously difficult shape to implement. So why wait? Dive into our collection and start adding those mesmerizing ripple effects to your website today.Having interesting, eye-catching visuals can go a long way towards making your site memorable to viewers. Experiment with different colors, sizes, and interaction triggers to create a design that captivates your users and keeps them engaged. Ripple effects are a powerful tool in web design, and with our collection of CSS ripple effect examples, you have a wide range of options to choose from. These effects can be customized to match your website's branding and style, allowing you to create a cohesive and visually striking design. You'll find code snippets that combine ripple effects with other animations, transitions, and even interactive elements. In addition to traditional ripple effects, our collection includes examples of more creative and unique interpretations of this technique. By incorporating these effects, you can add a layer of interactivity and responsiveness to your design, making it more engaging for your users. Ripple effects can be applied to various elements on your website, such as buttons, links, images, and even backgrounds. Whether you want to create a subtle and elegant ripple or a bold and vibrant one, this collection has something for everyone. These code snippets have been carefully selected to showcase a variety of ripple effect styles, allowing you to choose the one that best suits your design vision.

With our November 2022 update, we are excited to present four new items that you can easily integrate into your web projects.

#Css simple wave background animation free

If you're looking to incorporate ripple effects into your website, you're in luck! We have curated a collection of free HTML and CSS ripple effect code examples from trusted sources like CodePen, GitHub, and other reliable resources. By creating a ripple-like animation that emanates from a user's interaction, you can create a visually engaging and immersive experience. Ripple effects are a popular design technique that adds a sense of interactivity and dynamism to your web projects.