Change CSS Time of Day Code Snippet Generator

Creating a 'change CSS time of day' code snippet is easy using this code snippet generator.

What does this code snippet do?

This code allows you to have two different CSS stylesheets that switch between each another depending on the time of day.


  1. For creation purposes, we will use the terminology 'sunrise' as our first stylesheet and 'sunset' as our second stylesheet.
  2. If the visitor has javascript disabled, the 'sunrise' CSS file is shown by default.

How to generate a Change CSS Time of Day code snippet:

  1. Enter the correct URL paths to the two stylesheets and designate initiation times.
  2. Click the "Generate Change CSS Time of Day Code" button.
  3. Copy & paste the code into the HEAD tag area of your web page template.

 Sunrise CSS URL:
 Sunrise Start Time:

 Sunset CSS URL:
 Sunset Start Time:

Copy and paste the code into your web page.

You may use the Snap HTML Code Editor for live demo of the generated code.