Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

W3.CSS Color Themes


Color Themes

With W3.CSS, it is easy to customize your applications with color themes.

Movies 2014

  • Frozen

    The response to the animations was ridiculous

  • The Fault in Our Stars

    Touching, gripping and genuinely well made

  • The Avengers

    A huge success for Marvel and Disney

«»

Movies 2014

  • Frozen

    The response to the animations was ridiculous

  • The Fault in Our Stars

    Touching, gripping and genuinely well made

  • The Avengers

    A huge success for Marvel and Disney

«»

All you have to do is add a link to a predefined (or home made) theme:

Example

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-indigo.css">

Try It Yourself »


Predefined Themes

These are the predefined themes in W3.CSS:

w3-theme-red Try it
w3-theme-pink Try it
w3-theme-purple Try it
w3-theme-deep-purple Try it
w3-theme-indigo Try it
w3-theme-blue Try it
w3-theme-light-blue Try it
w3-theme-cyan Try it
w3-theme-teal Try it
w3-theme-green Try it
w3-theme-light-green Try it
w3-theme-lime Try it
w3-theme-khaki Try it
w3-theme-yellow Try it
w3-theme-amber Try it
w3-theme-orange Try it
w3-theme-deep-orange Try it
w3-theme-blue-grey Try it
w3-theme-brown Try it
w3-theme-grey Try it
w3-theme-dark-grey Try it
w3-theme-black Try it
w3-theme-w3schools Try it


Adding Gradients

One reader sent us this suggestion: You might want to consider adding a gradient for each theme.

I used the l2 and l1 colors from the blue theme to create this gradient:

Example

.w3-theme-gradient {
  color: #000 !important;
  background:-webkit-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
  color: #000 !important;
  background:-moz-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
  color: #000 !important;
  background:-o-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
  color: #000 !important;
  background:-ms-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
  color: #000 !important;
  background: linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}

Try It Yourself »


Downloadable Color Themes

Here are some downloadable color themes inspired by Google's Material Design:

Style Sheet Description
w3-theme-amber.css Color Theme Amber
w3-theme-black.css Color Theme Black
w3-theme-blue.css Color Theme Blue
w3-theme-blue-grey.css Color Theme Blue Grey
w3-theme-brown.css Color Theme Brown
w3-theme-cyan.css Color Theme Cyan
w3-theme-dark-grey.css Color Theme Dark Grey
w3-theme-deep-orange.css Color Theme Deep Orange
w3-theme-deep-purple.css Color Theme Deep Purple
w3-theme-green.css Color Theme Green
w3-theme-grey.css Color Theme Grey
w3-theme-indigo.css Color Theme Indigo
w3-theme-khaki.css Color Theme Khaki
w3-theme-light-blue.css Color Theme Light Blue
w3-theme-light-green.css Color Theme Light Green
w3-theme-lime.css Color Theme Lime
w3-theme-orange.css Color Theme Orange
w3-theme-pink.css Color Theme Pink
w3-theme-purple.css Color Theme Purple
w3-theme-red.css Color Theme Red
w3-theme-teal.css Color Theme Teal
w3-theme-yellow.css Color Theme Yellow


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.