Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

DOWNLOAD NOW

Creating the HTML Button

<button id="button" class="red">STOP</button>

We initiate our demo with a button element identified by the id “button” and carrying an initial class of red.

Styling the Button with CSS

body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: grey;
}

button {
padding: 10px;
font-size: 1.1em;
border: none;
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.2);
cursor: pointer;
}

.green {
background: green;
color: white;
}

.red {
background: red;
color: white;
}

The CSS above does two things: it improves the button’s appearance and it defines two state classes – .green and .red. These classes will be alternated in JavaScript, affecting the button’s color and the associated user message.

Toggling with JavaScript

const button = document.getElementById("button");
const buttonPressed = (e) => {
e.target.classList.toggle("green");
e.target.classList.toggle("red");
e.target.innerText = e.target.innerText.trim() === "STOP" ? "GO" : "STOP";
};
button.addEventListener("click", buttonPressed);

In the JavaScript snippet, we first access the button element using its id, "button". The buttonPressed function is then defined to react to a click event on this button. With each click, the .green and .red classes are toggled on our button element using classList.toggle(). This gives us the visual interplay between the red and green states.

Moreover, the button’s text also toggles between “STOP” and “GO” thanks to a ternary operator. This operator checks if the current button’s text is “STOP”, changing it to “GO” if true, and if not, it reverts back to “STOP”. This creates a clear visual correlation between the button’s appearance and its stated status.

The Final Result

💡 Pro Tip: The power of class toggling extends beyond our demonstration. You can create rich, interactive experiences across your designs by applying this technique. Consider a photo gallery where toggling a class alters the layout view, or a “Read More” feature on blog excerpts that expands the content view. The concept could also be applied to toggle dark and light modes on a website, offering a customizable user experience.

Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

DOWNLOAD NOW

Setting Up the HTML Structure

<div class="container">
  <ul>
    <li>
      <input type="checkbox" id="category">
      <label for="category">
        Groceries
      </label>
      <ul>
        <li>
          <label>
            <input type="checkbox" class="subCategory">
            Fruits
          </label>
        </li>
        <li>
          <label>
            <input type="checkbox" class="subCategory">
            Vegetables
          </label>
        </li>
        <li>
          <label>
            <input type="checkbox" class="subCategory">
            Dairy
          </label>
        </li>
      </ul>
    </li>
  </ul>
</div>

In this scenario, we’ve structured a list with a main checkbox labeled “Groceries” and three sub-categories.

Enhancing Visual Feedback with CSS

Next, we focus on using CSS to visually distinguish between various states of our checkboxes.

body {
color: #555;
font-size: 1.25em;
font-family: system-ui;
}

ul {
list-style: none;
}

.container {
margin: 40px auto;
max-width: 700px;
}

li {
margin-top: 1em;
}

label {
font-weight: bold;
}

input[type="checkbox"]:indeterminate + label {
color: #f39c12;
}

The input[type="checkbox"]:indeterminate + label selector is key here. It targets the label of the main checkbox when it’s in the indeterminate state, changing its color to indicate partial selection. The rest of the CSS provides general aesthetic tweaks.

Introducing Interactivity with JavaScript

const checkAll = document.getElementById('category');
const checkboxes = document.querySelectorAll('input.subCategory');

checkboxes.forEach(checkbox = >{
  checkbox.addEventListener('click', () = >{
    const checkedCount = document.querySelectorAll('input.subCategory:checked').length;

    checkAll.checked = checkedCount > 0;
    checkAll.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
  });
});

checkAll.addEventListener('click', () = >{
  checkboxes.forEach(checkbox = >{
    checkbox.checked = checkAll.checked;
  });
});

The JavaScript code here manages the state of the main checkbox based on the sub-options selected. The main checkbox enters an intermediate state, displaying a horizontal line as styled by Chrome on Windows when some sub-options are chosen. When all the sub-options are checked, the main checkbox returns to its original color and enters the checked state.

The Final Result

As each grocery item is selected, the main “Groceries” checkbox alternates between states, reflecting the selection status of the sub-items. This creates a clear visual cue to the user about the selection status.

Our demonstration through this HTML, CSS, and JavaScript blend, is just one of many tools you can use to enhance UI clarity. Don’t stop here—consider how other CSS pseudo-classes like :hover, :focus, or :active can also be utilized to provide real-time feedback to users. As you expand your web design toolkit, remember the goal is to create user experiences that are not only visually appealing but also communicate effectively with your audience.

UNLIMITED DOWNLOADS: 500,000+ WordPress & Design Assets

Sign up for Envato Elements and get unlimited downloads starting at only $16.50 per month! DOWNLOAD NOW

Smooth Scrolling

Smooth scrolling is a popular UX feature that makes scrolling through web pages smoother and more fluid. With this feature, instead of abruptly jumping to the next section of the page, the user will be smoothly transitioned to the next section.

To add smooth scrolling to your website, you can use the following JavaScript code:

$('a[href*="#"]').on('click', function(e) {
  e.preventDefault()

  $('html, body').animate(
    {
      scrollTop: $($(this).attr('href')).offset().top,
    },
    500,
    'linear'
  )
})

This code will create a smooth scrolling effect whenever the user clicks on a link that includes a # symbol in the href attribute. The code targets all such links and adds a click event listener to them. When the user clicks on a link, the code will prevent the default action of the link (i.e., navigating to a new page) and instead animate the page to scroll smoothly to the section of the page specified by the link’s href attribute.

Dropdown Menus

Dropdown menus are a common UI element that can help to organize content and improve the navigation of your website. With JavaScript, you can create dropdown menus that are easy to use and intuitive for your users.

To create a basic dropdown menu with JavaScript, you can use the following code:

var dropdown = document.querySelector('.dropdown')
var dropdownToggle = dropdown.querySelector('.dropdown-toggle')
var dropdownMenu = dropdown.querySelector('.dropdown-menu')

dropdownToggle.addEventListener('click', function() {
  if (dropdownMenu.classList.contains('show')) {
    dropdownMenu.classList.remove('show')
  } else {
    dropdownMenu.classList.add('show')
  }
})

This code will create a simple dropdown menu that can be toggled by clicking on a button with the class dropdown-toggle. When the button is clicked, the code will check if the dropdown menu has the class show. If it does, the code will remove the class, hiding the dropdown menu. If it doesn’t, the code will add the class, showing the dropdown menu.

Modal Windows

Modal windows are another popular UI element that can be used to display important information or to prompt the user for input. With JavaScript, you can create modal windows that are responsive, accessible, and easy to use.

To create a basic modal window with JavaScript, you can use the following code:

var modal = document.querySelector('.modal')
var modalToggle = document.querySelector('.modal-toggle')
var modalClose = modal.querySelector('.modal-close')

modalToggle.addEventListener('click', function() {
  modal.classList.add('show')
})

modalClose.addEventListener('click', function() {
  modal.classList.remove('show')
})

This code will create a modal window that can be toggled by clicking on a button with the class modal-toggle. When the button is clicked, the code will add the class show to the modal window, displaying it on the page. When the close button with the class modal-close is clicked, the code will remove the show class, hiding the modal window.

Sliders

Sliders are a popular UI element that can be used to display images or other types of content in a visually appealing and engaging way. With JavaScript, you can create sliders that are easy to use and customizable to fit your website’s design.

To create a basic slider with JavaScript, you can use the following code:

var slider = document.querySelector('.slider')
var slides = slider.querySelectorAll('.slide')
var prevButton = slider.querySelector('.prev')
var nextButton = slider.querySelector('.next')
var currentSlide = 0

function showSlide(n) {
  slides[currentSlide].classList.remove('active')
  slides[n].classList.add('active')
  currentSlide = n
}

prevButton.addEventListener('click', function() {
  var prevSlide = currentSlide - 1
  if (prevSlide < 0) {
    prevSlide = slides.length - 1
  }
  showSlide(prevSlide)
})

nextButton.addEventListener('click', function() {
  var nextSlide = currentSlide + 1
  if (nextSlide >= slides.length) {
    nextSlide = 0
  }
  showSlide(nextSlide)
})

This code will create a slider that can be navigated by clicking on buttons with the classes prev and next. The code uses the showSlide function to show the current slide and hide the previous slide whenever the slider is navigated.

Form Validation

Form validation is an essential UX feature that can help to prevent errors and improve the usability of your website’s forms. With JavaScript, you can create form validation that is responsive and user-friendly.

To create form validation with JavaScript, you can use the following code:

var form = document.querySelector('form')

form.addEventListener('submit', function(e) {
  e.preventDefault()
  var email = form.querySelector('[type="email"]').value
  var password = form.querySelector('[type="password"]').value

  if (!email || !password) {
    alert('Please fill in all fields.')
  } else if (password.length < 8) {
    alert('Your password must be at least 8 characters long.')
  } else {
    alert('Form submitted successfully!')
  }
})

This code will validate a form’s email and password fields when the form is submitted. If either field is empty, the code will display an alert message prompting the user to fill in all fields. If the password field is less than 8 characters long, the code will display an alert message prompting the user to enter a password that is at least 8 characters long. If the form passes validation, the code will display an alert message indicating that the form was submitted successfully.

In conclusion, JavaScript is a powerful tool that can be used to enhance the UX and UI of your website. By using these JavaScript snippets, you can create a more engaging and user-friendly experience for your users. However, it is important to use these JavaScript snippets wisely and sparingly to ensure that they do not negatively impact the performance of your website.

The Freelance Designer Toolbox

Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets All starting at only $16.50 per month

DOWNLOAD NOW

Getting the X and Y Position in JavaScript

To get the X and Y position of an HTML element in JavaScript, we can use the getBoundingClientRect() method. This method returns an object with properties that describe the position of the element relative to the viewport.

Here’s an example of how to get the X and Y position of an element with the ID “myElement” using JavaScript:

const element = document.getElementById('myElement');
const rect = element.getBoundingClientRect();
const x = rect.left + window.scrollX;
const y = rect.top + window.scrollY;

In this example, we first get a reference to the element using getElementById(). We then call the getBoundingClientRect() method on the element, which returns an object with properties such as left, top, right, and bottom. The left and top properties describe the X and Y position of the element relative to the viewport.

Note that the left and top properties returned by getBoundingClientRect() are relative to the top-left corner of the viewport, not the top-left corner of the document. To get the absolute position of the element, we need to add the current scroll position of the window to the left and top values using window.scrollX and window.scrollY, respectively.

Getting the X and Y Position in jQuery

In jQuery, we can use the offset() method to get the X and Y position of an HTML element. This method returns an object with properties that describe the position of the element relative to the document.

Here’s an example of how to get the X and Y position of an element with the ID “myElement” using jQuery:

const element = $('#myElement');
const x = element.offset().left;
const y = element.offset().top;

In this example, we first get a reference to the element using the jQuery selector $('#myElement'). We then call the offset() method on the element, which returns an object with properties such as left and top. The left and top properties describe the X and Y position of the element relative to the document.

Note that the offset() method returns the position of the element relative to the document, not the viewport. If you want to get the position of the element relative to the viewport, you can subtract the current scroll position of the window using $(window).scrollLeft() and $(window).scrollTop(), respectively. Here’s an example:

const element = $('#myElement');
const offset = element.offset();
const x = offset.left - $(window).scrollLeft();
const y = offset.top - $(window).scrollTop();

Like the previous example, we first get a reference to the element using the jQuery selector $('#myElement'), then call the offset() method on the element, which returns an object with properties such as left and top. The left and top properties describe the X and Y position of the element relative to the document.

The, to get the position of the element relative to the viewport, we subtract the current scroll position of the window using $(window).scrollLeft() and $(window).scrollTop(), respectively. This gives us the X and Y position of the element relative to the viewport.

Note that the scrollLeft() and scrollTop() methods return the number of pixels that the document is currently scrolled from the left and top edges, respectively. Subtracting these values from the offset of the element gives us its position relative to the viewport.

UNLIMITED DOWNLOADS: Email, admin, landing page & website templates

Starting at only $16.50 per month! DOWNLOAD NOW

Using setTimeout()

The setTimeout() function is a built-in JavaScript function that allows you to run a piece of code after a specified amount of time. You can use it to create a delay in your script. Here’s an example:

console.log('Before Sleep');
setTimeout(() => {
  console.log('After Sleep');
}, 3000);

In the example above, the console.log('Before Sleep') statement will be executed immediately, followed by a 3-second delay, after which the console.log('After Sleep') statement will be executed.

Using async/await

Another way to create a delay in JavaScript is to use the async/await syntax. With async/await, you can write asynchronous code that runs in a way that is similar to synchronous code. For example:

async function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function main() {
  console.log('Before Sleep');
  await sleep(3000);
  console.log('After Sleep');
}

main();

In this example, we’ve created an async function called sleep that returns a Promise that resolves after a specified amount of time. The main function uses the await keyword to wait for the sleep function to complete, effectively creating a 3-second delay.

Note that async/await is only supported in modern browsers and requires a runtime with support for Promises.

Both of these methods can be used to achieve a similar result to the PHP sleep() function, but with different syntax and limitations. Choose the method that works best for your use case.

Further reading.

Whether you’re familiar with other programming languages and want to get familiar with this one, or you’re brand new to the world of programming altogether — we’ve got you covered.

In this article, we will give you a quick introduction and provide some tips for getting started. Let’s go!

What is Node.js?

Node.js is a JavaScript runtime environment that allows you to run server-side code. It is built on the V8 JavaScript engine, which is the same engine that powers Google Chrome. As mentioned earlier, it is a highly efficient platform that employs an event-driven, non-blocking I/O model. In addition, it has a large community of open-source modules and libraries that can be used to extend its functionality.

Why Use Node.js?

There are a few reasons why you might want to use Node.js for your next project. Let’s discuss those now.

• It’s fast: The V8 JavaScript engine compiles and executes code quickly.
• It’s scalable: It can handle a large number of concurrent connections with ease. And it has a large network of open-source modules and libraries for extending its baseline functionality.
• It’s easy to get started: You can use it on your local machine without the need for a lot of setup.

But if you’re scratching your head as to how to put it to use, we’ve outlined that as well.

Practical Ways to Use Node.js

If you’re just getting started with Node.js, here are some practical ways that you can use it.

1. Create a basic web server: You can use it to create a simple web server that responds to requests from clients. This is a great way to get started with learning how to use the platform.
2. Build a CLI tool: It can be used to create command-line tools and utilities.
3. Create a web app: You can use it to create a web application that stores data in a database and serves content to users.
4. Build a desktop app: You can use it to build cross-platform desktop applications using tools like Electron.

These are just a few examples of how you can use Node.js. As you can see, it is a versatile platform that can be used for a variety of purposes.

Getting Started with Node.js

Now, we’ll walk you through the steps of setting up a development environment and creating your first program.

Step 1: Install Node.js

The first thing you need to do is install Node.js on your computer. You can do this by going to the website and downloading the appropriate installer for your operating system.

Step 2: Create a Node.js Program

Once it is installed, you can create a program in any text editor. We will use the built-in Node.js REPL (Read-Eval-Print-Loop) environment to run our program.

To launch the REPL, open your terminal or command prompt and type node. This will start the REPL environment where you can type JavaScript code and get immediate results.

Try typing the following code into the REPL:

console.log('Hello, world!');

You should see the output Hello, world printed to the console.

To exit the REPL, type .exit.

Step 3: Run Your Program

Now that you’ve written a Node.js program, you can run it using the node command.

To do this, open your terminal or command prompt and navigate to the directory where your program is saved. Then, type node filename.js, replacing “filename.js” with the name of your program.

For example, if your program is saved in a file called hello.js, you would type node hello.js to run it.

You should see the output of your program printed to the console.

And that’s it! You’ve successfully created and run your first Node.js program.

Get Started with Node.js Today

With this newfound knowledge about Node.js, why not give it a try? After all, it would just be yet another tool in your programming toolbox.

In this post, we’ll share 10 eye-catching CSS and JavaScript animations that you can use as an inspiration for incorporating animated effects in your next web design project.

Animated Tab Bar

Here’s a simple and stylish tab bar that’s animated whenever a user clicks on a different icon. You can easily use this as a tab bar but you can also implement it in a menu to make your navigation more dynamic.

See the Pen
Animated Tab Bar by abxlfazl khxrshidi (@abxlfazl)
on CodePen.light

Simple CSS Waves

This animation relies on CSS alone so there’s no JavaScript code. It features a subtle and elegant animation that looks like ocean waves. This would work perfectly on a hotel or a travel website as well as on a website promoting wellness products or services.

See the Pen
Simple CSS Waves | Mobile & Full width by Goodkatz (@goodkatz)
on CodePen.light

Space Globe

Lately, everyone’s been buzzing about space travel and this animation would highlight that topic perfectly. It features a space globe along with another sphere resembling a meteor. If you have any type of futuristic website or if you’re working on a technology oriented project, this animation could come in handy.

See the Pen
Space globe – Three.js by isladjan (@isladjan)
on CodePen.light

Gooey Footer

Here’s a fun animation that once again relies on pure CSS. If you decide to add it to your website, your footer will have a fun and playful gooey look. This animation would add a dose of interest to any creative website or website that’s not serving a corporate audience.

See the Pen
CSS Goey footer by Zed Dash (@z-)
on CodePen.light

Parallax Scroll Animation

Here’s a true work of art when it comes to what’s possible with a little bit of CSS and JavaScript. As you scroll down, the scene changes entirely from morning to night. If you need a creative background for a timelapse, this animation is a must-have.

See the Pen
Parallax scroll animation by isladjan (@isladjan)
on CodePen.light

Scroll Trigger Demo

At first glance, all you see is white background with black letters. But, when you scroll text and photos come into view and bring the entire thing to life. This animation would be a creative way to display any type of portfolio. Designers, photographers, and artists should definitely check this one out.

See the Pen
GSAP ScrollTrigger – Demo by Noel Delgado (@noeldelgado)
on CodePen.light

Fun Toggles

Toggles are pretty ubiquitous nowadays. But that doesn’t mean they have to be boring. With a bit of creativity, you can add simple animations and make them more fun. You’ll find a nice collection of various toggle animations, including a beer pong and a Kobe Bryant tribute.

See the Pen
Toggles by Olivia Ng (@oliviale)
on CodePen.light

Realistic Red Switch

CSS has indeed come a long way since its inception. This realistic red switch that relies on pure CSS animation is the best proof of what’s possible when you master CSS.

See the Pen
Realistic Red Switch (Pure CSS) by Yoav Kadosh (@ykadosh)
on CodePen.light

Neon Love

This animation would work well for any type of Valentine’s Day promotional campaign or on any website that caters to couples. It features a blue and pink neon heart that truly looks like neon lights.

See the Pen
NEON LOVE by al-ro (@al-ro)
on CodePen.light

Fluid Text Hover

Here’s another animation that at first glance looks like nothing special. Instead of a solid color, the text uses a photo fill. Once you hover over the word, the text becomes fluid. It’s pretty creative and it would work well on any artists or designer’s website that wants to show off their skills.

See the Pen
Fluid text hover by Robin Delaporte (@robin-dela)
on CodePen.light

That is why we’ve put together this list of collections of JavaScript snippets so you can bookmark and refer back to them whenever you are in need. Here are six useful resources for Javascript code snippets.

30 seconds of code

This JavaScript snippet collection contains a wide variety of ES6 helper functions. It includes helpers for dealing with primitives, arrays and objects, as well as algorithms, DOM manipulation functions and Node.js utilities.

JavaScriptTutorial.net

This website has a section that provides you with handy functions for selecting, traversing, and manipulating DOM elements.

HTMLDOM.dev

This website focuses on scripts that manage HTML DOM with vanilla JavaScript, providing a nice collection of scripts that do just that.

The Vanilla JavaScript Toolkit

Here’s a collection of native JavaScript methods, helper functions, libraries, boilerplates, and learning resources.

CSS Tricks

CSS Tricks has a nice collection of all different kinds of code snippets, including this great list of JS snippets.

Top 100 JavaScript Snippets for Beginners

Focusing on beginners, and a bit dated, but this list is still a worthwhile resource to keep in your back pocket.

JavaScriptSource.com

Thousands of useful snippets in a simple format and easily searchable!

We hope you find this list helpful in your future projects. Be sure to check out all of the other JavaScript resources we have here at 1stWebDesigner while you’re at it!

Particles & Waves

A very nicely done animation that responds to the mouse position.

See the Pen three.js canvas – particles – waves by deathfang (@deathfang) on CodePen.dark

Procedurally Generated Minimal Environment

A rotating mountain terrain grid animation.

See the Pen Procedurally generated minimal environment by Marc Tannous (@marctannous) on CodePen.dark

Particle Head

Similar to the particles and waves animation above, this one shows particles in the 3D shape of a head that moves with your mouse.

See the Pen WebGL particle head by Robert Bue (@robbue) on CodePen.dark

The Cube

Try to not spend hours playing this addictive game!

See the Pen The Cube by Boris Šehovac (@bsehovac) on CodePen.dark

Three.js Particle Plane and Universe

Here’s another one to play with using mouse movements, clicks and arrow keys.

See the Pen Simple Particle Plane & Universe :) by Unmesh Shukla (@unmeshpro) on CodePen.dark

Text Animation

A somewhat mind-boggling text animation that can also be controlled by your mouse.

See the Pen THREE Text Animation #1 by Szenia Zadvornykh (@zadvorsky) on CodePen.dark

Distortion Slider

Cool transition animation between slides. Click on the navigation dots to check it out.

See the Pen WebGL Distortion Slider by Ash Thornton (@ashthornton) on CodePen.dark

Torus Tunnel

This one will probably hurt your eyes if you look too long.

See the Pen Torus Tunnel by Mombasa (@Mombasa) on CodePen.dark

Three.js Round

This one is a beautifully captivating animation.

See the Pen three.js round 1 by alex baldwin (@cubeghost) on CodePen.dark

3D Icons

Nice animation of icons flying into becoming various words.

See the Pen Many Icons in 3D using Three.js by Yasunobu Ikeda a.k.a @clockmaker (@clockmaker) on CodePen.dark

WormHole

A great sci-fi effect featuring an infinite worm hole.

See the Pen WormHole by Josep Antoni Bover (@devildrey33) on CodePen.dark

Three.js + TweenMax Experiment

Another captivating animation that is difficult to walk away from.

See the Pen Three.js + TweenMax (Experiment) by Noel Delgado (@noeldelgado) on CodePen.dark

Three.js Point Cloud Experiment

Another particle-type animation that responds to mouse movements.

See the Pen Three Js Point Cloud Experiment by Sean Dempsey (@seanseansean) on CodePen.dark

Gravity

More 3D particles in a hypnotizing endless movement.

See the Pen Gravity (three.js / instancing / glsl) by Martin Schuhfuss (@usefulthink) on CodePen.dark

Rushing rapid in a forest by Three.js

For our last example, check out this somewhat simple geometric scene with an endlessly flowing waterfall.

See the Pen 33 | Rushing rapid in a forest by Three.js by Yiting Liu (@yitliu) on CodePen.dark

Are You Already Using Three.js In Your Projects?

Whether you are already using Three.js in your projects, are in the process of learning how to use it, or have been inspired to start learning it now, these examples should help you with further inspiration or to get a glimpse of how it can be done. Be sure to check out our other collections for more inspiration and insight into web design and development!

Pure CSS Glitch Effect

See the Pen Pure CSS Glitch Effect by Felix Rilling (@FelixRilling) on CodePen.dark

CodePen Challenge: Color Pop

See the Pen CodePen Challenge: Color Pop by Johan Lagerqvist (@lgrqvst) on CodePen.dark

Trippy CSS Effect

See the Pen Trippy CSS effect by kryo (@kryo2k) on CodePen.dark

Glitch Photo Filters CSS

See the Pen Glitch Photo Filters CSS by Sergey (@canti23) on CodePen.dark

Perspective Split Text Menu Hover

See the Pen Perspective Split Text Menu Hover by James Bosworth (@bosworthco) on CodePen.dark

Clean CSS Glitch

See the Pen Clean CSS Glitch by Piotr Galor (@pgalor) on CodePen.dark

Creepy Squiggly Text Effect with SVG

Text Shuffle & Distort

See the Pen Text shuffle & distort fx by Blaz Kemperle (@blazicke) on CodePen.dark

Glitch CSS

See the Pen Glitch CSS by Iliuta Stoica (@iliutastoica) on CodePen.dark

Infinite SVG Triangle Fusion

See the Pen Infinite SVG Triangle Fusion by Rob DiMarzo (@robdimarzo) on CodePen.dark

Glitch Effect in CSS

See the Pen Glitch effect in CSS by Thomas Aufresne (@origine) on CodePen.dark

Buttons with Trippy Background Animation on Hover

Trippy – CSS only

See the Pen Trippy – CSS only by Emmanuel Lainas (@RedGlove) on CodePen.dark

Laser Text Animation

Glitch Text

See the Pen Glitch Text by Chase (@chasebank) on CodePen.dark

Oddly Satisfying CSS Only Triangle Animation

See the Pen Oddly satisfying CSS Only triangle animation by eight (@eight) on CodePen.dark

Paint on Heat Distortion

See the Pen Paint on Heat Distortion by Matt Popovich (@mattpopovich) on CodePen.dark

Trippy Squares – Left to Right Wave

See the Pen Trippy Squares – Left to Right Wave! by Praveen Puglia (@praveenpuglia) on CodePen.dark

Glitch Clock

See the Pen Glitch Clock by Konstantin (@fearOfCode) on CodePen.dark

Glitchy and Psychedelic CSS Effects

There’s something simply awesome about an unusual distortion effect. Using them correctly can help you make an awesome website that people will love to explore. Too much distortion can be an eyestrain, but a cool trippy background animation or some glitchy text can pull the whole design together.

You also should be careful with implementing too many CSS effects onto your website. Too many animations can lead to a slowdown. If you find your website loading slowly, this guide can help you cut down on bloat and let you keep your awesome new effects.

Next time you’re making a dark website, a site with tech or programming focus, or a page you want to be unconventional and unique, try out one of these free glitchy CSS effects. You’ll love the character it can bring to a design.