cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.


  <div id="quote" class="blink"></div>
  <a href="">what?</a>


@keyframes blink {  
    0% { color: white; }
    100% { color: black; }
      0% { background-color: black; }
    100% { background-color: white; }
@-webkit-keyframes blink {
    0% { color: white; }
    100% { color: black; }
      0% { background-color: black; }
    100% { background-color: white; }
.blink {
    -webkit-animation: blink 0.3s linear infinite;
    -moz-animation: blink 0.3s linear infinite;
    -ms-animation: blink 0.3s linear infinite;
    -o-animation: blink 0.3s linear infinite;
    animation: blink 0.3s linear infinite;

.shake:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) infinite;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  20%, 80% {
    transform: translate3d(2px, 0, 0);

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);

  40%, 60% {
    transform: translate3d(4px, 0, 0);

@-webkit-keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  20%, 80% {
    transform: translate3d(2px, 0, 0);

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);

  40%, 60% {
    transform: translate3d(4px, 0, 0);

              var quotes = {
  "0": "Doing what you like is freedom. Liking what you do is happiness.\n",
  "1": "If you look to others for fulfillment, you will never be fulfilled.\n",
  "2": "When you realize there is nothing lacking, the world belongs to you.\n",
  "3": "Everything is perfect either for our growth or our enjoyment.\n",
  "4": "There is no such thing as a problem without a gift for you in its hands. You seek\n",
  "5": "problems because you need their gifts.\n",
  "6": "Tension is who you think you should be, relaxation is who you are.\n",
  "7": "The art of living lies less in eliminating our troubles than growing with them.\n",
  "8": "If you start to think the problem is \u2018out there,\u2019 stop yourself. That thought is the\n",
  "9": "problem.\n",
  "10": "Focus on the journey, not the destination.\n",
  "11": "Joy is found not in finishing an activity, but in doing it.\n",
  "12": "Happiness never decreases by being shared.\n",
  "13": "In our lives, change is unavoidable, loss is unavoidable. In the adaptability and\n",
  "14": "ease with which we experience change, lies our happiness and freedom.\n",
  "15": "Blessed are those who can give without remembering and take without\n",
  "16": "forgetting.\n",
  "17": "He who lives in harmony with himself lives in harmony with the universe.\n",
  "18": "All the world\u2019s a stage, and the men and women merely players. They have their\n",
  "19": "exits and their entrances; and one man in his time plays many parts.\n",
  "20": "When one door of happiness closes, another opens.\n",
  "21": "Happiness is not having what you want. It is appreciating what you have.\n",
  "22": "Most of us are just about as happy as we make up our minds to be.\n",
  "23": "Success is getting what you want. Happiness is wanting what you get.\n",
  "24": "Money doesn\u2019t bring happiness and creativity.Your creativity and happiness\n",
  "25": "brings money.\n",
  "26": "There is no stress in the world, only people thinking stressful thoughts and then\n",
  "27": "acting on them.\n",
  "28": "A smile is a curve that sets everything straight.\n",
  "29": "There is only one thing more painful than learning from experience and that is\n",
  "30": "not learning from experience.\n",
  "31": "Anxiety is the dizziness of freedom.\n",
  "32": "Life isn\u2019t measured by the breaths you take, but by the moments that take your\n",
  "33": "breath away.\n",
  "34": "Happiness is where we find it, but very rarely where we seek it.\n",
  "35": "To be content means that you realize you contain what you seek.\n",
  "36": "That which does not kill you makes you stronger.\n",
  "37": "Look at everything as though you were seeing it either for the first or last time.\n",
  "38": "Then your time on earth will be filled with glory.\n",
  "39": "You are responsible for your life. You can\u2019t keep blaming somebody else for your\n",
  "40": "dysfunction. Life is really about moving on.\n",
  "41": "If you want to enjoy the rainbow, be prepared to endure the storm.\n",
  "42": "Expecting life to treat you well because you are a good person is like expecting\n",
  "43": "an angry bull not to charge because you are a vegetarian.\n",
  "44": "Yesterday is the past.Tomorrow is the future. Today is a gift and that\u2019s why we\n",
  "45": "call it the present.\n",
  "46": "He who dares nothing need hope for nothing.\n",
  "47": "A coward gets scared and quits. A hero gets scared, but still goes on.\n",
  "48": "When we cannot find contentment in ourselves, it is useless to seek it elsewhere.\n",
  "49": "Everyone wants happiness. No one wants pain. But you can\u2019t have a rainbow,\n",
  "50": "without a little rain.\n",
  "51": "The tough times are what make our achievements feel so exhilarating; we need\n",
  "52": "that dynamic.\n",
  "53": "Feel the fear and do it anyway.\n",
  "54": "Knowing is not enough, we must apply; willing is not enough, we must do.\n",
  "55": "There is only one cause of unhappiness: the false beliefs you have in your head,\n",
  "56": "beliefs so widespread, so commonly held, that it never occurs to you to question\n",
  "57": "them.\n",
  "58": "Yesterday I was clever, so I wanted to change the world. Today I am wise, so I am changing myself.\n",
  "59": "Start by doing what's necessary, then do what's possible; and suddenly you are\n",
  "60": "doing the impossible.\n",
  "61": "We are like the spider. We weave our life and then move along in it. We are like\n",
  "62": "the dreamer who dreams and then lives in the dream.This is true for the entire\n",
  "63": "universe.\n",
  "64": "Always be on the lookout for ways to turn a problem into an opportunity for\n",
  "65": "success.\n",
  "66": "All our dream can come true, if we have the courage to pursue them.\n",
  "67": "There is only one thing that makes a dream impossible to achieve: the fear of\n",
  "68": "failure.\n",
  "69": "If you can dream it, you can do it. Always remember that this whole thing was\n",
  "70": "started with a dream and a mouse.\n",
  "71": "I don't dream at night, I dream all day; I dream for a living.\n",
  "72": "The biggest adventure you can ever take is to live the life of your dreams. \n",
  "73": "There is nothing either good or bad, but thinking makes it so.\n",
  "74": "What oxygen is to the lungs, such is hope to the meaning of life.\n",
  "75": "Our greatest weakness lies in giving up. The most certain way to succeed is\n",
  "76": "always to try just one more time.\n",
  "77": "In optimism there is magic. In pessimism there is nothing.\n",
  "78": "Don't ask yourself what the world needs. Ask yourself what makes you come\n",
  "79": "alive and then go do that. Because what the world needs is people who have\n",
  "80": "come alive.\n",
  "81": "You will either step forward into growth or step backward into safety.\n",
  "82": "Limitations live only in our minds. But if we use our imaginations, our\n",
  "83": "possibilities become limitless.\n",
  "84": "You will know the truth, and the truth will make you free.\n",
  "85": "By three methods we may learn wisdom: First, by reflection, which is noblest;\n",
  "86": "Second, by imitation, which is easiest; and third by experience, which is the\n",
  "87": "bitterest.\n",
  "88": "Knowing yourself is the beginning of all wisdom.\n",
  "89": "We cannot always build the future for our youth, but we can build our youth for\n",
  "90": "the future.\n",
  "91": "It is your decisions not your conditions that truly shape the quality of your life.\n",
  "92": "Optimism may sometimes be delusional, but pessimism is always delusional.\n",
  "93": "We are continually faced with great opportunities which are brilliantly disguised\n",
  "94": "as unsolvable problems.\n",
  "95": "If you just set out to be liked, you would be prepared to compromise on anything\n",
  "96": "at any time, and you would achieve nothing.\n",
  "97": "You have within you right now, everything you need to deal with whatever the\n",
  "98": "world can throw at you.\n",
  "99": "The leader has to be practical and a realist, yet must talk the language of the\n",
  "100": "visionary and the idealist.\n",
  "101": "Anyone who has never made a mistake has never tried anything new.\n",
  "102": "When the best leader\u2019s work is done the people say, \u2018We did it ourselves\u2019.\n",
  "103": "Luck favors the well prepared.\n",
  "104": "It is not because things are difficult that we do not dare, it is because we do not\n",
  "105": "dare that things are difficult.\n",
  "106": "Optimism is a strategy for making a better future.\n",
  "107": "The possible ranks higher than the actual.\n",
  "108": "Experience is not what happens to a man, it is what a man does with what\n",
  "109": "happens to him.\n",
  "110": "Imagination rules the world.\n",
  "111": "Simplicity is the ultimate sophistication.\n",
  "112": "To be simple is to be great.\n",
  "113": "If you knew how much work went into it, you wouldn't call it genius.\n",
  "114": "The weak can never forgive. Forgiveness is the attribute of the strong.\n",
  "115": "Be the change that you wish to see in the world.\n",
  "116": "Imperfection is beauty, madness is genius and it\u2019s better to be absolutely\n",
  "117": "ridiculous than absolutely boring.\n",
  "118": "And, when you want something, all the universe conspires in helping you to\n",
  "119": "achieve it.\n",
  "120": "Do not go where the path may lead, go instead where there is no path and leave\n",
  "121": "a trail.\n",
  "122": "None but ourselves can free our minds.\n",
  "123": "Only those who will risk going too far can possibly find out how far one can go.\n",
  "124": "It\u2019s not the load that breaks you down, it\u2019s the way you carry it.\n",
  "125": "Your life is an occasion. Rise to it.\n",
  "126": "Believe in yourself and all that you are. Know that there is something inside you\n",
  "127": "that is greater than any obstacle.\n",
  "128": "All we have is all we need. All we need is the awareness of how blessed we\n",
  "129": "really are.\n",
  "130": "There are far, far better things ahead than any we leave behind.\n",
  "131": "All that is gold does not glitter, not all those who wander are lost.\n",
  "132": "Ever tried.\n",
  "133": "Ever failed.\n",
  "134": "No matter.\n",
  "135": "Try Again.\n",
  "136": "Fail again.\n",
  "137": "Fail better.\n",
  "138": "We are repeatedly what we do. Excellence, then, is not an act, but a habit.\n",
  "139": "Your life is not a problem to be solved but a gift to be opened.\n",
  "140": "If you have nothing, then you have everything, because you have the freedom to\n",
  "141": "do anything, without the fear of losing something.\n",
  "142": "The man who moves a mountain begins by carrying away small stones.\n",
  "143": "Remarkable is a choice.\n",
  "144": "Our ability to grow is directly proportional to an ability to entertain the\n",
  "145": "uncomfortable.\n",
  "146": "The best and most beautiful things in the world cannot be seen or even touched,\n",
  "147": "but must be felt with the heart.\n",
  "148": "You must be the change you wish to see in the world.\n",
  "149": "Now and then it\u2019s good to pause in our pursuit of happiness and just be happy.\n",
  "150": "I am not here to change the world. I am changing the world because I am here.\n",
  "151": "It is better to be hated for what you are than loved for what you are not.\n",
  "152": "Poor is the soul whose pleasure depends upon the permission of another.\n",
  "153": "The most common way people give up their power is by thinking they don\u2019t have\n",
  "154": "any.\n",
  "155": "I am not what happened to me, I am what I choose to become.\n",
  "156": "Some succeed because they are destined. Some succeed because they are\n",
  "157": "determined.\n",
  "158": "To live a creative life, we must lose our fear of being wrong.\n",
  "159": "It\u2019s not denial. I\u2019m just selective about the reality I accept.\n",
  "160": "It always seems impossible until it\u2019s done.\n",
  "161": "As soon as you trust yourself, you will know how to live.\n",
  "162": "This world is but a canvas to our imagination.\n",
  "163": "There are always flowers for those who want to see them.\n",
  "164": "I shut my eyes in order to see.\n",
  "165": "Man is born to live, not to prepare for life.\n",
  "166": "Life is short, and it's up to you to make it sweet.\n",
  "167": "This is your life and it's ending one minute at a time\n",
  "168": "To love oneself is the beginning of a lifelong romance.\n",
  "169": "When the student is ready, the master will appear.\n",
  "170": "Believe in yourself.\n",
  "171": "If today were the last day of my life, would I want to do what I am about to do\n",
  "172": "today?\n",
  "173": "The best preparation for tomorrow is doing your best today.\n",
  "174": "What we think, we become.\n",
  "175": "If opportunity doesn't knock, build a door.\n",
  "176": "Change your thoughts and you change your world.\n",
  "177": "We know what we are, but know not what we may be.\n",
  "178": "Believe you can and you're halfway there.\n",
  "179": "Your big opportunity may be right where you are now.\n",
  "180": "No matter what people tell you, words and ideas can change the world.\n",
  "181": "There is nothing impossible to him who will try.\n",
  "182": "What great thing would you attempt if you knew you could not fail?\n",
  "183": "I believe in living today. Not in yesterday, nor in tomorrow.\n",
  "184": "The most important thing is to enjoy your life - to be happy - it's all that matters.\n",
  "185": "The secret to happiness is low expectations.\n",
  "186": "Victory is paid for in sweat, courage, and preparation.\n",
  "187": "Yesterday you said tomorrow.\n",
  "188": "The only one who can tell you 'you can't' is you. And you don't have to listen.\n",
  "189": "Runs end.  Running doesn't.\n",
  "190": "If you went running when you first started thinking about it, you'd be back by\n",
  "191": "now.\n",
  "192": "Just do it.\n",
  "193": "Strong is the new beautiful.\n",
  "194": "My better is better than your better.\n",
  "195": "Greatness is earned, never awarded.\n",
  "196": "Failure's not an option. It's a step.\n",
  "197": "Giving up is not an option.\n",
  "198": "Fear less. Do more. Get outside and get after it.\n",
  "199": "If it doesn't challenge you, it doesn't change you.\n",
  "200": "Don't run away from challenges. Run over them.\n",
  "201": "The harder you push, the more you are pulled.\n",
  "202": "Take the high road and go higher.\n",
  "203": "Take charge. Write your own story.\n"

 * Randomize array element order in-place.
 * Using Durstenfeld shuffle algorithm.
function shuffle(array) {
  for (var i = array.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  return array;

// Create array in range [0,json.length]
var array = Array.apply(null, {
  length: Object.keys(quotes).length
}).map(Function.call, Number);


var i = 0;

document.getElementById("quote").innerHTML = quotes[array[i]];


Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.


Loading ..................